【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