Flutter渲染原理解析

Flutter，一切皆Widget。
先看一张Google提供的的原理图：

flutter-ui

这张图清晰地解释了：Flutter只关心向 GPU提供视图数据，GPU的 VSync信号同步到 UI线程，UI线程使用 Dart来构建抽象的视图结构，这份数据结构在 GPU线程进行图层合成，视图数据提供给 Skia引擎渲染为 GPU数据，这些数据通过 OpenGL或者 Vulkan提供给 GPU。
所以 Flutter并不关心显示器、视频控制器以及 GPU具体工作，它只关心 GPU发出的 VSync信号，尽可能快地在两个 VSync信号之间计算并合成视图数据，并且把数据提供给 GPU。
Skia是一款内置于android或者说Google的2D绘图引擎，且是跨平台的，但是IOS不自带这个引擎，所以打出来的IOS的包比android大一些。

flutter-ui

从上图我们可以看到，更进一步描述了开始的渲染流程图，用户输入是驱动视图更新的信号，如滑动屏幕等。然后会触发动画进度更新，框架开始build抽象视图数据，在之后，视图会进行布局、绘制、合成（渲染过程的三个步骤），最后进行光栅化处理把数据生成一个个真正的像素填充数据。在Flutter中，构建视图数据结构、布局、绘制、合成、与Engine的数据同步和通信放到了Framework层，而光栅化则放在了Engine层中。

视图数据结构：

上面说到UI线程使用Dart来构建抽象的视图结构，无论是比较底层的框架，还是上层的应用代码，在向绘制引擎提供视图数据时，都需要一份结构化的视图数据，类似抽象语法树，也就是上面所讲到的Layer Tree，Flutter的视图数据抽象分为3部分，分别是Widget、Element、RenderObject。
Widget：

Widget

Widget里面存储了一个视图的配置信息，包括布局、属性等。它是一份轻量的数据结构，在构建时是结构树，它不参与直接的绘制，所以说Widget仅仅是配置文件，Flutter团队对它做了优化，频繁的创建/销毁它们，都不会存在明显的性能问题。所以一旦数据发生改变，直接销毁，new一个新的。
Widget包含StatelessWidget和StatefullWidget两个常用类，StatelessWidget是无状态变化的类，需要重新展示时得重新new，StatefullWidget是有状态变化的类，很类似react的设计理念，state存放于中间，通过调用state.setState()才会触发该节点及以下整个子树更新。
Element

Element

Element是Widget的抽象，当一个Widget首次被创建的时候，那么这个Widget会通过Widget.createElement，创建一个element，挂载到Element Tree遍历视图树。在attachRootWidget函数中，把 widget交给了 RenderObjectToWidgetAdapter这座桥梁，Element创建的同时还持有 Widget和 RenderObject的引用。构建系统通过遍历Element Tree来创建RenderObject，每一个Element都具有一个唯一的key，当触发视图更新时，只会更新标记的需变化的Element。类似react中setState后虚拟dom树的更新。
一个Widget对象可以对应多个Element对象。（相同的widget可以同时存在）
RenderObject

RenderObject

RenderObject作为UI视图的描述方式，其中含有4个重用的属性和方法，

constraints： 从 parent 传递过来的约束。
parentData： 这里面携带的是 parent 渲染 child 的时候所用到的数据。
performLayout()：此方法用于布局所有的 child。
paint()：这个方法用于绘制自己或者 child。
后面会看到具体出现场景。

在 RenderObject树中会发生 Layout、Paint的绘制事件（下面会具体讲到），大部分绘图性能优化发生在这里，RenderObject Tree构建为Canvas的所需描述数据，加入到Layer Tree中，最终在Flutter Engine中进行视图合成并光栅化交给GPU。

接下来看下Flutter Widget渲染的三个阶段：
1.Layout（布局的计算）：确定每个子widget大小和在屏幕中的位置。
2.Paint（视图的绘制）：为每个子widget提供canvas，让他们绘制自己。
3.Composite（合成）：所有widget合成到一起，交给GPU处理。

Layout 布局

Layout

1.父控件(parent)将布局约束传递给子控件(child)，父控件通过传递Containers参数，告诉子控件自己的大小（布局约束），以此来决定子控件的位置。
2.子控件将布局详情上传给父控件，并继续向下约束子控件，子控件的位置不存储在自己的容器（布局详情）中，而是存储在自己的parentData字段里，所以当他的位置发生变化时，并不需要重新布局或绘制。
例如：parent会给child一个约束，最大宽度500px(布局约束)、最大高度500px(布局约束)，child会说我只用100px(布局详情)，并将其传递给parent，parent会继续向上传递，直到root widget为止。所以布局约束数据的传递顺序是自上而下，和web一样，布局约束条件和布局详情都取决于盒子模型协议和滑动布局协议。