【Flutter】Widget、Element和Render的关系-Flutter三棵树
【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、三棵树的联系
- 你编写的 Flutter 界面，首先构建出一棵 Widget 树
- Flutter 框架根据 Widget 树构造或更新对应的 Element 树
- 如果 Widget 是有可视化效果的，它还会创建相应的 RenderObject，并组成 Render Tree
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