剖析 Flutter 渲染管线：Animate、Build、Layout、Paint 四大阶段源码全景

## 1. 渲染管线的四大黄金阶段 每当硬件发出 Vsync 垂直同步信号时，Flutter 引擎会触发 `RendererBinding.drawFrame()`，按序执行以下四个关键步骤： ``` [Vsync Signal] ↓ 1. Animate ── 驱动 Ticker、AnimationController 步进 ↓ 2. Build ── 脏 Element 树重建 (setState 标记) ↓ 3. Layout ── 从根 RenderObject 向下传递约束并计算几何尺寸 ↓ 4. Paint ── 记录绘制指令到 DisplayList / LayerTree ↓ [Composite & Rasterize] ── 发送至 GPU 栅格化上屏 ``` ## 2. 为什么 Layout 阶段能做到单次遍历（One-Pass）？ Flutter 强制遵循严格的 **BoxConstraints 约束向下传递、Size 几何尺寸向上反馈** 规则，任何节点不得在同一帧中回溯计算，从而将整棵树的布局时间复杂度严格压制在 O(N)。