Flutter 三棵树

学习此好文章记录

Widget

控件层，在flutter中，Container、Text等组件都属于Widget，所以我们将这种树称为Widget树，也可以叫做控件树，他就表示我们在dart代码中所写的控件的结构

Element

Widget的另一种抽象，也可以把它看作一个更为实际控件，因为在我们的手机屏幕上显示的控件并非我们代码中所写的Widget，我们在代码中所使用的像 Container、Text等这类组件和其属性只不过是我们想要构建的组件的配置信息，当我们第一次调用 build()方法想要在屏幕上显示这些组件时，Flutter会根据这些信息生成该Widget控件对应的Element，同样地，Element 也会被放到相应的Element树中，在Flutter中，一个Widget通过多次复用可以对应多个Element实例，Element才是我们真正在屏幕上显示的元素。

Element 与 Widget 另一个区别在于，Widget天然是不可变的（immutable），他如要更新便需要重建，如果想要把可变状态与Widget联系起来，可以使用StatefulWidget，StatefulWidget通过使用StatefulWidget.createState 方法创建 State对象，并将之扩充到Element以及合并到树中;

Widget统治者Element，Widget有点像class生成对象Element

Widget【将军】 ->Element 【百夫长】->RenderObject【士兵】

RenderObject

在flutter中做组件布局渲染的工作，其为了组件间的渲染搭配及布局约束也有对应的RenderObject树，我们称之为渲染树。

组件渲染过程简述

我们知道控件树中的每个控件都会实现一个RenderObject对象做渲染任务，并将所有RenderObject组成渲染树。Flutter渲染组件的过程如下：
Full Pipeline
User Input -> Animation -> Build -> Layout -> Paint -> Composite -> Rasterize

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

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

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

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

渲染树详解

渲染树上每个节点都是一个继承自 RenderObject 类的对象，其由Element中的renderObject或