https://saucewu.github.io/tags/widget/Recent content in Widget on Website of SauceWuHugo -- gohugo.iozhTue, 20 Jan 2026 10:00:00 +0000https://saucewu.github.io/posts/flutter-%E6%B8%B2%E6%9F%93%E6%B5%81%E7%A8%8B%E4%B8%8E%E4%B8%89%E6%A3%B5%E6%A0%91%E8%AF%A6%E8%A7%A3/Tue, 20 Jan 2026 10:00:00 +0000https://saucewu.github.io/posts/flutter-%E6%B8%B2%E6%9F%93%E6%B5%81%E7%A8%8B%E4%B8%8E%E4%B8%89%E6%A3%B5%E6%A0%91%E8%AF%A6%E8%A7%A3/<h1 id="flutter-渲染流程与三棵树详解">Flutter 渲染流程与三棵树详解</h1> <h2 id="目录">目录</h2> <ul> <li>一、Flutter 渲染架构全览</li> <li>二、三棵树是什么</li> <li>三、三棵树的协作流程</li> <li>四、各层职责与修改时机</li> <li>五、常见场景：该动哪一层？</li> <li>六、总结</li> </ul> <hr> <h2 id="一flutter-渲染架构全览">一、Flutter 渲染架构全览</h2> <p>Flutter 的渲染流程从 Dart 代码到屏幕像素，经过了多个层次的处理：</p> <pre tabindex="0"><code>你写的 Widget ↓ Widget Tree（配置描述） ↓ Element Tree（生命周期 + 状态管理） ↓ RenderObject Tree（布局 + 绘制） ↓ Layer Tree（合成） ↓ Skia / Impeller（光栅化） ↓ GPU → 屏幕 </code></pre><p>这套架构的核心设计目标是<strong>把&quot;描述&quot;和&quot;执行&quot;分离</strong>，让 Widget 可以廉价重建，而真正昂贵的布局和绘制操作尽量复用。</p>