先看一段简单的代码
void main() => runApp(
Center(
child: RichText(
textDirection: TextDirection.ltr,
text: TextSpan(
text: "你好, Jack",
),
),
),
);
显示
image.png
通过在浏览器中查看 Dart DevTools, 可以发现这里有三个Widget, 层级关系分别是 Root -> Center -> RichText.
image.png
我们通过跟踪源码看看 Widget 到底是怎么渲染到屏幕上去的.
- runApp(): 将给定的组件设为根组件.
image.png
-
- 通过梳理 Center, RichText 类的继承关系. 如下
-
Center -> Align->SingleChildRenderObjectWidget->RenderObjectWidget-> Widget -> DiagnosticableTree -
RichText->MultiChildRenderObjectWidget->RenderObjectWidget -> Widget-> DiagnosticableTree
image.png
总结:
Flutter 中有三种树结构用来渲染界面.
- Center/Align 和 RichText 归为 Widget 树,
- 用于设置UI具体的配置, 包括各种属性.
- 其父组件 SingleChildRenderObjectWidget / MultiChildRenderObjectWidget 中会创建对应的 Element, 构建 Element 树. (SingleChildRenderObjectElement 和 MultiChildRenderObjectElement 均继承自 RenderObjectElement)
- 用于存放 Widget 引用, 管理 Widget 的生命周期(创建, 更新, 销毁)
再来看看真实的渲染对象.
image.png
- Align 继承自抽象类 SingleChildRenderObjectWidget, 重写了
createRenderObject()方法. 返回了真实的渲染对象. - RenderPositionedBox 的类继承关系如下
- RenderPositionedBox -> RenderAligningShiftedBox -> RenderShiftedBox -> RenderBox ->
RenderObject - 在
RenderObject中有 markNeedsLayout performLayout markNeedsPaint paint 等方法, 用来确定大小, 布局并渲染自身.
- RenderPositionedBox -> RenderAligningShiftedBox -> RenderShiftedBox -> RenderBox ->
- 每一个与界面相关的 Widget 在显示时都会创建其对应的 RenderObject, 子Widget 依赖父Widget, 最终构成 Render 树.
有几点需要注意
- Render 树中的 Widget 都是最终继承自 RenderObjectWidget, 用于渲染界面
- 对于 StatelessIWidget 和 StatefulWidget, 他们直接继承自 Widget, 所以他们的子类比如Container, TextField 均不在 Render 树中.
在创建Widget的时候, 总是会看到一个 key 的参数, 它是怎么使用的呢?
在抽象类 Widget 的源码中我们能看到
abstract class Widget extends DiagnosticableTree {
...
final Key key;
static bool canUpdate(Widget oldWidget, Widget newWidget) {
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;
}
}
- 程序根据 Widget 的运行时类型和 key 来判断是否应该创建新的 Widget 来显示界面.
- Key 本身是一个抽象类, 不过它有一个工厂构造器, 可以创建一个 ValueKey.
- 直接子类主要有: LocalKey 和 GlobalKey.
- LocalKey, 它用于具有相同 父Element 的 Widget 之间进行比较.
- GlobalKey, 通常我们会使用 GlobalKey 访问某个 Widget 的信息, 包括其对应的 Widget 或 State 或Element
