Flutter 渲染原理

1、Flutter 渲染原理

v2-75f96e1898d47521c91b6de1ac0e4c91_r.jpg

Flutter框架包含Flutter Framework(Dart)、Flutter Engine(C/C++)、Embedber(Android/iOS平台层)。其中：
Flutter Framework(Dart)：实现了一套基础库， 用于处理动画、绘图和手势，并且基于绘图封装了一套 UI组件库，然后根据 Material 和Cupertino两种视觉风格区分开来。这个纯 Dart实现的 SDK被封装为了一个叫作 dart:ui的 Dart库。我们在使用 Flutter写 App的时候，直接导入这个库即可使用组件等功能。
Flutter Engine(C/C++)：包括 Skia引擎、Dart运行时、文字排版引擎等。它是 Dart的一个运行时，它可以以 JIT 或者 AOT的模式运行 Dart代码。这个运行时还控制着 VSync信号的传递、GPU数据的填充等，并且还负责把客户端的事件传递到运行时中的代码。
渲染流程：GPU的VSync信号同步给到UI线程，UI线程使用Dart来构建抽象的视图结构（这里是Framework层的工作），绘制好的抽象视图数据结构在GPU线程中进行图层合成（在Flutter Engine层的工作），然后提供给Skia引擎渲染为GPU数据，最后通过OpenGL或者 Vulkan提供给 GPU，GPU渲染好传递给显示器显示。

UI界面绘图流程

v2-b2a9d17b97899261f5d3efe310a5cc93_1440w.jpg

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