Flutter原理：三棵重要的树(渲染过程、布局约束、应用视图的构建等)

熟悉了 Flutter 中的上述三颗树，相信读者会对组件的渲染过程有了一个清晰的认识，这对我们之后学习常用组件有很大的帮助，我们需要用不同的眼光去看待我们所建立的布局和控件，之后我们也会更加深入的去理解其中更不为人知的奥秘。

2 组件渲染过程简述

从上文中，我们知道控件树中的每个控件都会实现一个 RenderObject 对象做渲染任务，并将所有的 RenderObject 组成渲染树。Flutter 渲染组件的过程如下：

Flutter 的渲染过程由用户的输入开始，当接受到用户输入的信号时，就会触发动画的进度更新，例如我们第一次渲染时的启动动画，或者我们在滚动手机屏幕时单个列表项复用时的移动动画。之后便需要开始视图数据的构建（build），这一步中 Flutter 创建了前文所描述的三棵视图树。

在这之后，视图才会进行布局（layout），计算各个部分的大小，然后进行绘制（paint），生成每个视图的视觉数据，这部分的任务主要就是由 RenderObject 所做。这里，Flutter 中的布局过程可用下图表示，在上述构建完成渲染树后，父渲染对象会将布局约束信息向下传递，子渲染对象根据自己的渲染情况返回 Size，Size 数据会向上传递，最终父渲染对象完成布局过程。

最后一步进行“光栅化”（Rasterize），前一步得到合成的视图数据其实还是一份矢量描述数据，光栅化帮助把这份数据真正地生成一个一个的像素填充数据。在 Flutter 中，光栅化这个步骤被放在了 Engine 层中。

在日常开发学习中，我们只需要在代码层配置好我们的 Widget 树，了解各种 Widget 特性及使用方法，其余的工作都可以交给我们的框架层去实现。

3 元素树详解

我们已经知道了各类控件的作用及其使用方法，这些 Widget 被我们开发人员配置了多个属性来定义它的展现形式，例如配置 Text 组件需要显示的字符串，配置输入框组件需要显示的内容。我们 Element 树会记录这些配置信息。熟悉 React 的读者可能了解过其中的 “虚拟 DOM” 这个概念，上述 Flutter 这种操作也正体现了这一概念。Widget 是不可变，它的改变就意味着要重建，而其重建也非常频繁，如果我们将更多的任务都交给它将会对性能造成很大的损伤，因此我们把 Widget 组件当作一个虚拟的组件树，而真正被渲染在屏幕上的其实是 Elememt 这棵树，它持有其对应 Widget 的引用，如果他对应的 Widget 发生改变，它就会被标记为 dirty Element，于是下一次更新视图时根据这个状态只更新被修改的内容，