Flutter 笔记——帧绘制系列之二（源码学习）

2024-02-15 06:14:58

前言

在上一篇文章中，我们学习了 Flutter 中 runApp() 和 State.setState() 过程。这篇文章，我们将继续学习 Flutter 中实际渲染 UI 的过程。

Flutter 中的帧绘制过程

Flutter 中的帧绘制过程可以分为以下几个步骤：

Repaint ：当需要更新 UI 时，Flutter 会首先调用 Repaint 函数。Repaint 函数会遍历所有需要更新的 widget，并调用它们的 paint() 方法。paint() 方法会将 widget 转换成一个 Layer 对象。
Rebuild ：如果 widget 的状态发生了改变，Flutter 会调用 Rebuild 函数。Rebuild 函数会重新创建 widget 的实例，并调用它们的 build() 方法。build() 方法会创建一个新的 Layer 对象。
Relayout ：如果 widget 的大小或位置发生了改变，Flutter 会调用 Relayout 函数。Relayout 函数会重新计算 widget 的布局，并调用它们的 layout() 方法。layout() 方法会创建一个新的 Layer 对象。
Rasterization ：Flutter 会将所有需要绘制的 Layer 对象转换成一个 Picture 对象。Picture 对象是一个包含所有绘制指令的二进制数据结构。
PipelineOwner ：Flutter 会将 Picture 对象发送给 PipelineOwner。PipelineOwner 会将 Picture 对象交给 GPU 进行渲染。
显示到屏幕 ：GPU 将渲染后的图像显示到屏幕上。

滚动和动画的实现原理

Flutter 中的滚动和动画都是通过 PipelineOwner 实现的。PipelineOwner 会将需要滚动的 Layer 对象和需要执行动画的 Layer 对象标记为特殊 Layer。当 PipelineOwner 将 Picture 对象交给 GPU 进行渲染时，GPU 会根据这些特殊 Layer 的标记对它们进行特殊的处理。