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 一样自动天生，而是必要我们本身来插手到控件树中。

6.【Widget】控件层。全部控件的基类都是 Widget，Widget 的数据都是只读的, 不能改变。以是每次必要更新页面时都必要从头建设一个新的控件树。每一个 Widget 会通过一个 RenderObjectElement 对应到一个渲染节点(RenderObject)，可以简朴领略为 Widget 中只存储了页面元素的信息，而真正认真机关、渲染的是 RenderObject。

在页面更新从头天生控件树时，RenderObjectElement 树会只管保持重用。因为 RenderObjectElement 持有对应的 RenderObject，全部 RenderObject 树也会尽也许的被重用。如图所示就是三棵树之间的相关。在这张图里我们把外形当做渲染节点的范例，颜色是它的属性，即外形差异就是差异的渲染节点，而颜色差异只是统一工具的属性的差异。

图7: Widget、Element 和 Render 之间的相关

假如想把方形的颜色换成黄色，将圆形的颜色酿成赤色，因为控件是不能被修改的，必要从头天生两个新的控件 Rectangle yellow 和 Circle red。因为只是修改了颜色属性，以是 Element 和 RenderObject 都被重用，而之前的控件树会被开释接纳。

图8: 示例

那么假如把赤色圆形酿成三角形又会奈何呢?因为这里产生变革的是范例，，以是对应的 Element 节点和 RenderObject 节点都必要从头建设。可是因为黄色方形没有产生改变，以是其对应的 Element 节点和 RenderObject 节点没有产生变革。

图9: 示例

7. 最后是【Material】 & 【Cupertino】，这是在 Widget 层之上框架为开拓者提供的基于两套计划说话实现的 UI 控件，可以辅佐我们的 App 在差异平台上提供靠近原生的用户体验。

Flutter 在马蜂窝商家端

（编辑：湖南网）

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