面试题：Flutter 引擎层的绘制流程

Question

请详细描述Flutter引擎层从接收到绘制指令到最终在屏幕上显示的大致绘制流程，涉及到哪些关键组件和步骤？

Answer 1

1. 关键组件：

   • Skia：是一个2D图形库，Flutter使用Skia进行图形渲染，它提供了绘制各种图形（如路径、图像、文本等）的底层能力。
   • Dart VM：运行Dart代码，负责管理Flutter应用程序的逻辑，与引擎层进行交互，将业务逻辑转化为绘制指令。
   • GPU驱动：负责与GPU硬件交互，将绘制命令传递给GPU进行加速渲染。
   • 合成器（Compositor）：将不同层的绘制内容合成在一起，生成最终要显示在屏幕上的图像。

2. 大致绘制流程：

   • 构建阶段（Build Phase）：
     • Dart代码通过Widget树描述UI结构。当Widget状态变化时，Flutter框架会调用build方法，构建新的Widget树。在这个过程中，会创建各种RenderObject，这些RenderObject用于描述具体的渲染信息，例如位置、大小等。
   • 布局阶段（Layout Phase）：
     • 基于RenderObject树，Flutter执行布局算法。每个RenderObject会根据自身的约束条件（如父容器的大小限制等）确定自己的大小和位置。这个过程会从根RenderObject开始，递归地调用子RenderObject的布局方法，从而确定整个UI的布局。
   • 绘制阶段（Paint Phase）：
     • 布局完成后，RenderObject会将绘制指令传递给Skia库。RenderObject的paint方法会被调用，它会使用Skia提供的API来绘制自身的内容，如绘制矩形、圆形、文本等。绘制指令会以图形操作的形式记录下来。
   • 合成阶段（Composition Phase）：
     • 绘制的内容会被组织成不同的层（Layer）。这些层可能包括文本层、图像层等。合成器（Compositor）会将这些层按照一定的顺序进行合成。例如，具有较高z - index的层会显示在上方。合成后的结果是一个最终的图像。
   • 显示阶段（Display Phase）：
     • 合成后的图像会通过GPU驱动发送到GPU进行处理。GPU会对图像进行光栅化（将矢量图形转换为像素），并将最终的像素数据发送到屏幕进行显示。同时，Flutter采用了双缓冲机制，即一个缓冲区用于显示当前帧，另一个缓冲区用于准备下一帧，这样可以提高渲染效率，减少闪烁等问题。