Flutter 渲染 Widget 源码解析

先看一段简单的代码

void main() => runApp(
  Center(
    child: RichText(
      textDirection: TextDirection.ltr,
      text: TextSpan(
          text: "你好, Jack",
      ),
    ),
  ),
);

显示

image.png

通过在浏览器中查看 Dart DevTools, 可以发现这里有三个Widget, 层级关系分别是 Root -> Center -> RichText.

image.png

我们通过跟踪源码看看 Widget 到底是怎么渲染到屏幕上去的.

• 1. runApp(): 将给定的组件设为根组件.

image.png

• 2. 通过梳理 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 等方法, 用来确定大小, 布局并渲染自身.
• 每一个与界面相关的 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