关于前端:精读自由-磁贴混合布局

本篇精读来自笔者代码实际，没有原文出处请谅解。

早些咱们介绍过了 磁贴布局 – 功能分析 与实现，当初咱们来做一个更进一步的思考，如何让磁贴布局与自在布局混合实现？

让磁贴布局与自在布局混合实现，从成果来看就是让画布同时存在磁贴与自在布局两种布局状态的组件，并且能够随时切换。接下来咱们剖析实现该计划的技术要点。

磁贴与自在布局的差别

磁贴布局与自在布局在交互上有很多差别，比方：

• 磁贴布局不能重叠，自在布局能够重叠。
• 磁贴布局能够向上方吸引，自在布局不会被吸引。
• 磁贴布局不存在主动吸附概念，但自在布局能够反对对齐，吸附等性能。

这些交互时差别都容易在运行时离开解决补救，真正须要从顶层设计的是 单位的差别。

自在布局因为地位固定，所以个别以像素形容地位；磁贴布局因为宽高是依照比例来的，往往以不带单位的 {w:1, h:2} 等绝对数字形容地位，在渲染时再依据以后视窗大小缩放。

但在磁贴与自在混合的状况下，一个组件的布局抉择磁贴还是自在能够由父容器来决定，或者本身来决定，这就引发了一个挑战：

一个组件的状态可能随时被切换到磁贴或自在 ，同时混用两种单位论上也能够实现，但计算成本比拟高，所以最好采纳一种单位来存储与计算，那么 同时适配磁贴与自在的单位就是像素。

用像素实现磁贴布局

因为自在布局应用像素计算非常容易，所以咱们只讲磁贴布局下如何用像素计算。

像素模式下所有磁贴组件的地位、大小都是像素：

{
  "layoutMode": "grid",
  "x": 100,
  "y": 100,
  "width": 150,
  "height": 150
}

如上所示，磁贴模式的组件与自在布局组件的差别仅在 layoutMode 值的区别，地位形容是齐全一样的。

为了让磁贴布局组件能够适配屏幕大小缩放，须要存储画布根节点宽度 rootWidth，比方宽度为 150 的组件是在画布 rootWidth 为 1000 时保留下来的，那么在画布宽度为 2000 的屏幕尺寸关上时，组件宽度就要放大到 300.

自在布局对齐磁贴布局

自在布局在大部分状况下是无奈对齐磁贴布局的，因为即使咱们将这两种布局的地位对立应用像素形容，但磁贴布局还是免不了会在不同尺寸的屏幕间缩放，也就是磁贴布局组件的地位是不固定的，而自在布局组件的地位是固定的，所以自在布局组件某条边对齐了磁贴布局的组件，也只在以后画布宽度下失效，一旦换一个尺寸屏幕就会产生偏移。

一种维持自在与磁贴组件绝对地位的方法是“整体随访”，即画布中所有组件地位都依照画布大小缩放，实现该计划有两种技术路线：

1. scale 画布整体缩放。
2. 仅地位、宽高的缩放。

第一种缩放形式会同时缩放组件内字体、图表等元素的大小，而第二种计划不会，咱们能够依据理论场景灵便抉择来实现，但两种形式都能够达到自在布局与磁贴布局稳固对齐的成果。

总结

自在与磁贴混合布局模式下，还有更多值得咱们思考的中央，比方：

• 是否容许磁贴布局与自在布局的组件产生碰撞。
• 怎么设计能力在同时多选了磁贴与自在布局组件时，批量拖动。
• 磁贴布局组件在拖入更小的容器时，宽度依照画布尺寸缩放，还是依照该容器尺寸缩放。
• 自在布局成组模式下，组内组件如何反对磁贴布局。

甚至，是否将浏览器最早反对的流式布局模式一起退出混合？混合布局模式还有很多值得深刻思考的中央。

探讨地址是：精读《自在 + 磁贴混合布局》· Issue #488 · dt-fe/weekly

如果你想参加探讨，请 点击这里，每周都有新的主题，周末或周一公布。前端精读 – 帮你筛选靠谱的内容。

关注 前端精读微信公众号

<img width=200 src=”https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg”>

版权申明：自在转载 - 非商用 - 非衍生 - 放弃署名（创意共享 3.0 许可证）