请描述 Flutter 中一帧画面的完整渲染流程，并说明 Widget 树、Element 树与 RenderObject 树三者之间的对应关系及各自的作用。
考察说明
考察对 Flutter 渲染管线中三棵树结构及协作机制的深入理解。
回答思路
- 【回答框架 1】Flutter 渲染采用三棵树结构：Widget 树是用户界面的不可变配置描述，Element 树是 Widget 的实例化复用层，RenderObject 树负责实际的布局、绘制和命中测试。三者通过 element 关联，widget 树变化后，由 framework 进行 reconcile，更新 element 和 render object 树。
- 【回答框架 2】渲染流程从 runApp 开始，widget 被 inflate 成 element，同时创建对应的 render object。当调用 setState 时，widget 重建，framework 通过 canUpdate 检查 runtimeType 和 key 来判断是更新还是重建 element。更新的 element 会调用 render object 的 markNeedsLayout 和 markNeedsPaint 来触发后续的布局和绘制。
- 【回答框架 3】布局阶段自顶向下，render object 根据父级约束计算出尺寸和位置，最终完成整个树的布局。绘制阶段通过 layer 树进行，render object 将绘制指令记录到 layer 中，最终由引擎合成并显示到屏幕上。绘制通过 Layer tree 与 RenderObject 树关系密切，但通常提三棵树。
- 【回答框架 4】三者关系可概括为：Widget 是不可变配置，Element 持有 widget 和相关状态，RenderObject 负责渲染。Element 树是核心的复用和差分更新机制，RenderObject 树是真正执行渲染工作的树。组合（Composition）而非继承是 Flutter 构建 UI 的主要思想。
- 【关键点 1】Widget 不可变，Element 可变，RenderObject 负责实际布局绘制。
- 【关键点 2】三棵树通过 element 关联，widget 变化驱动 element 和 render object 更新。
- 【关键点 3】setState 触发 rebuild，通过 canUpdate 决定复用或重建 element。
- 【关键点 4】布局和绘制分别由 layout 和 paint 阶段完成，通过 markNeedsLayout 和 markNeedsPaint 标记脏区域。
- 【关键点 5】渲染管线分为 build、layout、paint 和 composite 等阶段。
- 【易错点 1】容易混淆 Widget 和 Element 的生命周期，Widget 只是配置，状态存储在 Element 或 State 中。
- 【易错点 2】误认为 setState 会重建整棵 RenderObject 树，实际只有脏区域需要重新布局和绘制。
- 【易错点 3】忽略 layer 树在合成阶段的作用，误以为 RenderObject 直接负责最终显示。