2、Widget、Element、RenderObject

1、Flutter 之图像绘制原理

3、Flutter UI 更新流程

4、build 流程分析

5、layout 流程分析

6、Paint 绘制（1）

7、Paint 绘制（2）

8、composite 流程分析

9、Flutter 小实践

一、基本介绍

第一章提到，在 Flutter 的 Engine 层向 Dart 层的暴露了 Canvas, PictureRecorder 等接口，利用这些接口能够绘制本身想要的图像。经过直接调用 API 绘制图像，这种更像指令式操做。在 Flutter 中，能够以声明式组件构建本身的UI, 经过构建一个个的 Widget 组件，来声明界面应该有哪些功能，长什么样, 像 ReactNative 的虚拟 DOM 同样，这些 widget 并非最终显示在 界面的组件。一个 Widget 构建 到最终显示在显示器上图像主要经历了三个阶段： Widget --> Element --> RenderObject

@override Widget build(BuildContext context) { return Row( children: [ Text('文本1'), Row( children: [ Image.asset('/assets/images/test.png'), Text('文本2') ], ) ], ); } 在上面这个例子中，Widget 树有四个 widgets，两个 Row widget 及其子 widget。

在上示例子中，当要更新第二个Text的文本颜色时，销毁整个旧 WidgetTree，生成一棵新 WidgetTree，而ElementTree 与 RenderObjecrTree 只替换变动的节点。

二、三颗树职责

（1）Widget

UI 视图的配置信息，在 Flutter中，并非经过指令的方式直接操做UI， 而是经过数据驱动驱动视图改变~ widget 描述了前配置和状态描述了它们的视图, 是不可变的,当某个widget的状态发生更改时，widget会从新构建所描述的视图。

widget 生成对应的渲染对象 renderObject 主要是经过 createRenderObject 方法，可是 并不是全部的widget都能调用 createRenderObject 建立对应的 renderObject, 只有 RenderObjectWidget 类的widget 才拥有 createRenderObject 方法，那其余 StatelessWidget, StatefulWidget 这些，它们的 renderObject 是怎么来的呢？这个后面再分析

（2）RenderObject RenderObject的主要职责是，计算节点的大小，位置，进行相关绘制和布局操做，即最终真正的渲染对象

(3) Element widget 和 renderObject 的中间调度者

三、为何须要三颗树？

widget 是比较轻量的，只是涉及相关UI 的配置信息，销毁重建成本比较低，可是 renderObject 涉及到 布局，绘制等复杂的操做，同时还包含对应的layer，是一个真正渲染的view，整个view 树从新建立开销就比较大