Flutter的渲染机制

Flutter能够做到跨平台是因为使用的是Skia渲染引擎来绘制UI，不仅可以保证Android和iOS上UI的一致性，而且也可以避免对原生控件依赖而带来的限制及高昂成本。

我们下面通过Flutter的框架和Flutter中的三棵树来详细了解一下Flutter的渲染原理

Flutter框架

Flutter框架

Flutter Engine层：

这是一个纯C++实现的SDK，其中包括了Skia引擎、Dart运行时、文字排版引擎等。在代码调用dart:ui库时，调用最终会走到Engine层，然后实现真正的绘制逻辑。

Flutter Framework层：

Framework层可大致分为三层：
1，最下面两层：（Foundation和Animation、Painting、Gestures）是dart的UI层，对应的是Flutter中的dart:ui包，它是Flutter引擎暴露的底层UI库，提供动画、手势、及绘制能力。
2，Rendering层，这一层是一个抽象的布局层，它依赖于dart UI层，Rendering层会构建一个UI树，当UI树有变化时，会计算出有变化的部分，然后更新UI树，最终将UI树绘制到屏幕上，这个过程类似于React中的虚拟DOM。Rendering层可以说是Flutter UI框架最核心部分，它除了确定每个UI元素的位置、大小之外还要进行坐标变换、绘制（调用底层dart:ui）。
3，Widgets层是Flutter提供的一套基础组件库，在基础库之上，Flutter还提供了Material和Cupertino两种风格的组件库。而我们在Flutter开发中，打交道最多的也是这两层。

Flutter中的三棵树：

在Flutter中几乎所有的对象都是Widget。Widget不仅可以表示UI元素，也可以表示一些功能性的组件，比如手势、主题等。Widget的功能是“描述一个UI元素的配置数据”，Widget其实并不是表示最终绘制在设备屏幕上的显示元素，而它只是描述显示元素的一个配置数据。
最终的UI树其实是由一个个独立的Element节点构成。
从创建到渲染的大体流程是：根据Widget生成Element，然后创建响应的RedderObject并关联到Element.renderObject属性上，最后再通过RenderObject来完成布局排列和绘制。
我们可以认为Flutter的UI系统包含三棵树：Widget树、Element树、渲染树。他们的依赖关系是：Element树根据Widget树生成，而渲染树又依赖于Element树。

Flutter三棵树

Widget：

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

Element：

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

RenderObject：

RenderObject作为UI视图的描述方式，其中含有4个重用的属性和方法。
constraints：从parent传递过来的约束。
parentData：这里面携带的是parent渲染child的时候所用到的数据。
performLayout()：此方法用于布局所有的child。
paint()：这个方法用于绘制自己或者child。

RenderObject Tree构建为Canvas的所需描述数据，加入到Layer Tree中，最终在Flutter Engine中进行视图合成并光栅化交给GPU。

资料来源：https://book.flutterchina.club/