
讲一下Flutter中的三棵树
Flutter中的三棵树, 分别是Widget树, Element树, RenderObject树.
Widget树
Widget树是由Widget对象组成的层级结构, 描述UI的配置信息(外观, 行为, 属性)
Widget树主要有以下特点:
- 不可变, 重建之后无法修改属性
- 轻量级对象, 创建成本较低
- 仅描述UI是什么样子, 是个类似于配置表的东西,不负责渲染和布局
作用:
- 声明UI和配置.
- 触发重建 (当状态变化时, 会创建新的Widget实例)
Dart
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: Text("Hello"),
);
}
Element树
Element树 是由 Element对象组成的层级结构, 是Widget与RenderObject之间的桥梁.
Element树有以下几个特点:
- Element树整体是一个可变的, 可以更新状态(因为Element实际上是持有State对象的)
- 每一个Element对应一个Widget, 但是Widget重建时,Element是可以复用的.
- 保存Widget的上下文信息,处理事件分发
Element树主要有以下几个作用:
- 管理 Widget 和 RenderObject 的映射关系
- 负责Widget树的 Diff算法 (主要是通过Diff算法来决定到底是哪一部分Widget进行刷新)
- 控制Widget的生命周期
Element树的关键机制:
-
Element树通过
Widget.canUpdate()
方法判断是否复用 Element -
对比Widget的RuntimeType 和 key 来判断是否需要更新
Dartstatic bool canUpdate(Widget oldWidget, Widget newWidget) { return oldWidget.runtimeType == newWidget.runtimeType && oldWidget.key == newWidget.key; }
RenderObject树
RenderObject树 是真正意义上负责UI的绘制与渲染的对象树, 主要作用是 处理布局, 绘制与响应事件.
RenderObject树的特性主要有以下几个:
- 重量级对象, 创建成本比较高
- 包含具体的渲染逻辑(包括尺寸计算, 位置确定, 绘制路径等)
- 维护渲染相关的状态(如约束布局, 变换矩阵等)
RenderObject树的作用主要有以下几个:
- 执行布局(Layout): 计算每个元素的尺寸和位置
- 执行绘制(Paint): 将UI绘制到屏幕
- 处理命中测试(Hit testing): 响应用户交互, 处理用户触摸事件
结束
