【Flutter】Widget、Element和Render的關系-Flutter三棵樹

一、前言

在 Flutter 中，所謂的“三棵樹”是指：

• Widget Tree（部件樹）
• Element Tree（元素樹）
• Render Tree（渲染樹）

它們是 Flutter 框架內部 UI 構建與渲染機制中的核心概念，三者相互協作，共同支撐起高性能的界面渲染。

By the way,博主在面試的時候被問了「三棵樹是什么？」，我一時不知道說的是啥，但是我知道他們的聯系，之前一直從事原生開發，第一次面試Flutter(￣.￣)(￣?￣)ㄟ(▔,▔)ㄏ。

---

二、三棵樹是什么

1、Widget Tree（部件樹）

• 是什么？
  Widget 是 Flutter 中的 UI 聲明式組件，比如 Text、Container、Row、Column 等。

• 特點：

  • 是不可變的（immutable）
  • 描述 UI 的靜態結構
  • 每次 build() 都會重新創建新的 Widget 樹

• 作用：
  用于描述你想“畫”什么，但本身不具備渲染能力。

---

2、Element Tree（元素樹）

• 是什么？
  每個 Widget 被插入樹中后，都會生成對應的 Element（元素），用于維護 widget 的上下文（state、位置等）。

• 特點：

  • 是 widget 的“實例化”版本
  • 可變對象，框架會盡量重用元素以優化性能
  • 包含對 widget 的引用以及對渲染對象（RenderObject）的引用（若有）

• 作用：

  • 連接 widget（聲明）和 render object（繪制）之間的橋梁

---

3、Render Tree（渲染樹）

• 是什么？
  真正承擔繪制任務的對象樹，所有具有可視化能力的 Widget（如 Container、Text）最終會轉化為 RenderObject 并構建成渲染樹。

• 特點：

  • 控制尺寸、布局、繪制、命中測試等底層功能
  • 位于 Flutter 的渲染層（flutter/rendering）
  • 通常由 RenderBox 及其子類構成

• 作用：

  • 負責計算布局、繪制 UI 到屏幕

---

4、三棵樹的聯系

1. 你編寫的 Flutter 界面，首先構建出一棵 Widget 樹
2. Flutter 框架根據 Widget 樹構造或更新對應的 Element 樹
3. 如果 Widget 是有可視化效果的，它還會創建相應的 RenderObject，并組成 Render Tree
4. Render Tree 最終執行布局和繪制，渲染出用戶看到的界面

---

5、舉例說明

Widget build(BuildContext context) {return Column(children: [Text("Hello"),Container(padding: EdgeInsets.all(8),child: Text("World"),),],);
}

• Widget Tree：構建出 Text、Container、Text 等節點
• Element Tree：每個 Widget 會創建一個對應的 Element（StatelessElement / StatefulElement）
• Render Tree：Text → RenderParagraph，Container → RenderDecoratedBox，控制真實布局和繪制

---

三、總結對比

樹類型	是否可變	作用	生命周期
Widget Tree	不可變	描述 UI 結構	每次 build 重建
Element Tree	可變	管理 widget 實例上下文	盡量復用
Render Tree	可變	控制布局與繪制	可復用/更新

---

四、關于作者(ZFJ_張福杰)

• 官網：https://zfjsafe.com
• 博客：https://zfj1128.blog.csdn.net
• Github：https://github.com/zfjsyqk
• Gitee：https://gitee.com/zfj1128
• 打賞：https://zfjsafe.com/paycode