Flutter 实现原理及在马蜂窝的跨平台开发实践

例如，控件被设置了固定大小(tight constraint)、控件忽略所有子视图尺寸对自己的影响、控件自动占满父控件所提供的空间等等。很好理解，就是控件大小不会影响其他控件时，就没必要重新布局整个控件树。有了这个机制后，无论子树发生什么样的变化，处理范围都只在子树上。

图4: Relayout Boundary 机制

在确定每个空间的位置和大小之后，就进入绘制阶段。绘制节点的时候也是深度遍历绘制节点树，然后把不同的 RenderObject 绘制到不同的图层上。

这时有可能出现一种特殊情况，如下图所示节点 2 在绘制子节点 4 时，由于其节点4需要单独绘制到一个图层上(如 video)，因此绿色图层上面多了个黄色的图层。之后再需要绘制其他内容(标记 5)就需要再增加一个图层(红色)。再接下来要绘制节点 1 的右子树(标记 6)，也会被绘制到红色图层上。所以如果 2 号节点发生改变就会改变红色图层上的内容，因此也影响到了毫不相干的 6 号节点。

图5: 绘制节点与图层的关系

为了避免这种情况，Flutter 的设计者这里基于 Relayout Boundary 的思想增加了 Repaint Boundary。在绘制页面时候如果遇见 Repaint Boundary 就会强制切换图层。

如下图所示，在从上到下遍历控件树遇到 Repaint Boundary 会重新绘制到新的图层(深蓝色)，在从下到上返回的时候又遇到 Repaint Boundary，于是又增加一个新的图层(浅蓝色)。

图6: Repaint Boundary 机制

这样，即使发生重绘也不会对其他子树产生影响。比如在 Scrollview 上，当滚动的时候发生内容重绘，如果在 Scrollview 以外的地方不需要重绘就可以使用 Repaint Boundary。Repaint Boundary 并不会像 Relayout Boundary 一样自动生成，而是需要我们自己来加入到控件树中。

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!