©   w4lle's Notes
Powered by Hexo
Theme - Material
w4lle's Notes

人生如逆旅，我亦是行人。

w4lle's avatar w4lle

Flutter UI 渲染浅析（四）Build

系列文章的第四篇，本篇文章主要分析下 Element.rebuild() 过程。

源码基于 Flutter v1.20.4。

在 Flutter UI 渲染浅析（二）VSync 注册 这篇文章中提到，C++ Engine 接收到 VSync 信号后，需要做三件事情：

  • 执行 Dart Framework dart:ui 包下的 _beginFrame()
  • 执行 microtasks 任务
  • 执行 Dart Framework dart:ui 包下的 _drawFrame()

上一篇文章 Flutter UI 渲染浅析（三）Animation 原理 中分析了 _beginFrame() 的过程。

然后接着去处理在 Animate 过程中触发的 microtasks 任务，一般为 Ticker 或者 AnimationController 中 Future 的完成回调。

本篇文章分析下 _drawFrame() 的前半部分—— Element.rebuild() 的过程。

1、_handleDrawFrame()

同上篇文章的逻辑一样，调用到 Dart Framework 的SchedulerBinding._handleDrawFrame() 方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// lib/src/scheduler/binding.dart
	void _handleDrawFrame() {
    if (_ignoreNextEngineDrawFrame) {
      _ignoreNextEngineDrawFrame = false;
      return;
    }
    handleDrawFrame();
  }
  void handleDrawFrame() {
    assert(_schedulerPhase == SchedulerPhase.midFrameMicrotasks);
    //结束Animate过程记录
    Timeline.finishSync(); // end the "Animate" phase
    try {
      // PERSISTENT FRAME CALLBACKS
      _schedulerPhase = SchedulerPhase.persistentCallbacks;
      for (final FrameCallback callback in _persistentCallbacks)
        _invokeFrameCallback(callback, _currentFrameTimeStamp);
      // POST-FRAME CALLBACKS
      _schedulerPhase = SchedulerPhase.postFrameCallbacks;
      final List<FrameCallback> localPostFrameCallbacks =
          List<FrameCallback>.from(_postFrameCallbacks);
      //清除列表
      _postFrameCallbacks.clear();
      for (final FrameCallback callback in localPostFrameCallbacks)
        _invokeFrameCallback(callback, _currentFrameTimeStamp);
    } finally {
      //SchedulerPhase状态置为idle，等待下一次绘制触发
      _schedulerPhase = SchedulerPhase.idle;
      //结束Frame过程记录
      Timeline.finishSync(); // end the Frame
      _currentFrameTimeStamp = null;
    }
  }

主要做了两件事情：

  • 遍历 _persistentCallbacks，由 WidgetsBinding.addPersistentFrameCallback() 注册，从名字也可以看出，它是一个需要持久回调的列表，所以不可删除，每次绘制过程都会回调
  • 遍历_postFrameCallbacks，由 WidgetsBinding.addPostFrameCallback() 注册，只会回调一次，调用过后清除回调列表，一般用于监听绘制完成后处理一些任务

下面主要看下_persistentCallbacks 的执行过程。

1.1、RendererBinding.drawFrame()

在 Flutter UI 渲染浅析（二）VSync 注册 这篇文章中，我们简单分析了 7 个 Binding 类的作用及其初始化顺序。

在 RendererBinding 在初始化过程中，注册了_persistentCallbacks 回调，如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
mixin RendererBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, SemanticsBinding, HitTestable {
  @override
  void initInstances() {
    super.initInstances();
    _instance = this;
    //初始化绘制管线
    _pipelineOwner = PipelineOwner(
      onNeedVisualUpdate: ensureVisualUpdate,
      onSemanticsOwnerCreated: _handleSemanticsOwnerCreated,
      onSemanticsOwnerDisposed: _handleSemanticsOwnerDisposed,
    );
    //注册window回调
    window
      ..onMetricsChanged = handleMetricsChanged
      ..onTextScaleFactorChanged = handleTextScaleFactorChanged
      ..onPlatformBrightnessChanged = handlePlatformBrightnessChanged
      ..onSemanticsEnabledChanged = _handleSemanticsEnabledChanged
      ..onSemanticsAction = _handleSemanticsAction;
    //初始化RenderObject根节点RenderView
    initRenderView();
    _handleSemanticsEnabledChanged();
    //这里添加_persistentCallbacks回调
    addPersistentFrameCallback(_handlePersistentFrameCallback);
    ...
  }
  ...
  //_persistentCallbacks回调
  void _handlePersistentFrameCallback(Duration timeStamp) {
    //真正执行frame绘制
    drawFrame();
    _mouseTracker.schedulePostFrameCheck();
  }

_handlePersistentFrameCallback(Duration timeStamp) 方法是 _persistentCallbacks 回调列表的一个子元素，其中去调用 drawFrame() 方法。

由于 WidgetsFlutterBinding 的混入顺序

1
2
3
4
5
6
7
8
// lib/src/widgets/binding.dart
class WidgetsFlutterBinding extends BindingBase with GestureBinding, SchedulerBinding, ServicesBinding, PaintingBinding, SemanticsBinding, RendererBinding, WidgetsBinding {
  static WidgetsBinding ensureInitialized() {
    if (WidgetsBinding.instance == null)
      WidgetsFlutterBinding();
    return WidgetsBinding.instance;
  }
}

WidgetsBinding 在 RendererBinding 之后，所以会先执行 WidgetsBinding.drawFrame() 方法。

1.2、WidgetsBinding.drawFrame()

WidgetsBinding.drawFrame() 实现: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// lib/src/widgets/binding.dart WidgetsBinding
mixin WidgetsBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, RendererBinding, SemanticsBinding {
  @override
  void initInstances() {
    super.initInstances();
    _instance = this;
    //构造BuildeOwner，主要负责Widget的build过程
    _buildOwner = BuildOwner();
    buildOwner.onBuildScheduled = _handleBuildScheduled;
    //注册window相关回调
    window.onLocaleChanged = handleLocaleChanged;
    window.onAccessibilityFeaturesChanged = handleAccessibilityFeaturesChanged;
  	//导航channel  
    SystemChannels.navigation.setMethodCallHandler(_handleNavigationInvocation);
    FlutterErrorDetails.propertiesTransformers.add(transformDebugCreator);
  }
  
	@override
  void drawFrame() {
		...
    try {
      //renderViewElement是根RenderObject RenderView对应的Element
      if (renderViewElement != null)
        buildOwner.buildScope(renderViewElement);
      //调用mixin的drawFrame方法，即RendererBinding.drawFrame()
      super.drawFrame();
      buildOwner.finalizeTree();
    }
    ...
  }
}
  • buildOwner.buildScope() 触发Widget Tree、Element Tree、RenderObject Tree三棵树的构建或刷新过程
  • super.drawFrame() 调用父类的 drawFrame() 方法，由于 WidgetsBinding 混入了 RendererBinding ，所以这里会去调用 RendererBinding.drawFrame() ，下篇文章会继续分析
  • buildOwner.finalizeTree() 卸载未激活状态的 Element 节点。未激活状态的节点在一个绘制帧周期内，是有可能被重新激活的，如果没有重新激活，那么就卸载掉

1.3、BuildOwner.buildScope()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// lib/src/widgets/framework.dart BuildOwner
	void buildScope(Element context, [ VoidCallback callback ]) {
    // 记录 Build 过程
    Timeline.startSync('Build', arguments: timelineArgumentsIndicatingLandmarkEvent);
    try {
      _scheduledFlushDirtyElements = true;
      if (callback != null) {
        _dirtyElementsNeedsResorting = false;
        // 执行回调，在App启动构建三棵树时会用到
        callback();
      }
      // 重排序，高度优先
      _dirtyElements.sort(Element._sort);
      _dirtyElementsNeedsResorting = false;
      int dirtyCount = _dirtyElements.length;
      int index = 0;
      while (index < dirtyCount) {
        try {
          // 触发 Elemeng.rebuild() 更新三棵树
          _dirtyElements[index].rebuild();
        }
        index += 1;
        // 在等待VSync 信号回调过程中，有可能又有新的标脏节点进来
        if (dirtyCount < _dirtyElements.length || _dirtyElementsNeedsResorting) {
          // 重排序，高度优先
          _dirtyElements.sort(Element._sort);
          _dirtyElementsNeedsResorting = false;
          dirtyCount = _dirtyElements.length;
          while (index > 0 && _dirtyElements[index - 1].dirty) {
            index -= 1;
          }
        }
      }
    } finally {
      for (final Element element in _dirtyElements) {
        // 清除 Element 脏标记
        element._inDirtyList = false;
      }
      // 清空脏列表
      _dirtyElements.clear();
      _scheduledFlushDirtyElements = false;
      _dirtyElementsNeedsResorting = null;
      // 结束 Build 记录过程
      Timeline.finishSync();
    }
  }
  • 执行回调，在 App 启动时WidgetsFlutterBinding.ensureInitialized() ..scheduleAttachRootWidget(app) 会用到，用于构建出三棵树，callback 为 element.mount(null, null);
  • _dirtyElements 脏列表重排序，在等待 VSync 信号回调过程中，有可能又有新的标脏节点进来
  • 脏列表中的节点，即调用了 State.setState() 的节点，触发 Element.rebuild() 更新三棵树，这里的重点也是Element.rebuild()。
  • 清除 Element 脏标记，清空脏列表

1.4、Element.rebuild()

1
2
3
4
5
6
7
8
9
10
// flutter/lib/src/widgets/framework.dart Elememt  
	void rebuild() {
    ...
    if (!_active || !_dirty)
      return;
    performRebuild();
  }
  @protected
  void performRebuild();

逻辑比较简单，调用 performRebuild()，它是一个空方法，实现在子类。

2、Widget、Element 与 RenderObject

在继续分析后续流程之前，先简单梳理下 Widget、Element 与 RenderObject 之间的关系，以及三棵树与 Layer Tree 之间的关系。

Flutter 开发者最熟悉的就是 Widget 了。

Widget 是面向开发者的接口，它是对UI的描述性表达，即是用于描述 Element 的配置的。

Widget 是声明式的 UI 结构，开发者通过组合 Widget 构建出想要的UI效果。

Widget 是不可变的（immutable），这就意味着每次刷新，都会重新构建出新的Widget对象，创建的开销很小，成本较低。

我们通常将 Widget 组合构建出的 UI 层级结构称为 Widget Tree，但相比 Element Tree，实际上并不存在 Widget Tree，由于 Widget 节点挂载在 Element 节点上，所以我们可以抽象为 Widget Tree。

Widget 提供 createElement() 和 createRenderObject() （并不是所有）用于构建 Element 和 RenderObject。

Widget 主要有三种类型：

  • ProxyWidget 代理类，不直接参与构建UI，它们可以为其他 Widget 提供一些附加信息。例如 InheritedWidget 可以在其子树中传递附加信息；ParentDataWidget 用于提供其子树的布局信息
  • ComponentWidget 组合类，不直接参与绘制，它们用来组合包装用来构建复杂的UI布局。一般都是 StatefullWidget 或者 StatelessWidget 的子类，例如 RaisedButton 、Scaffold、Text、 GestureDetector、 Container 等
  • RenderObjectWidget 绘制类，可以构建出 RenderObject 用来布局和绘制

Element 是响应式编程的基础，频繁的创建 Element 会对性能有影响，所以只有在必要条件下才会创建一个新的 Element 对象，大部分情况下会进行复用，主要包含两个职责：

  • 持有 Widget 和 RenderObject 的引用，协调二者之间的数据绑定关系
  • 根据 Widget 的变化来创建或更新 Element Tree，包括挂载、更新、更改位置、卸载等

Element 和 Widget 是一一对应的关系，同样类型的 Widget 构建出同样类型的 Element。

RenderObject 用来布局和绘制，处理输入事件等。

Element 和 RenderObject 不是一一对应的，只有可以绘制的节点才有 RenderObject 对象。

Render Tree 用来布局和绘制 RenderObject 节点，最终生成 Layer Tree 提交给 C++ Engine。它的根节点是 RenderView。

他们三者之间的关系：

Element 持有 Widget 引用和 RenderObject 应用（可能没有），Widget 用来构建 RenderObject 对象。

对于 StatefullElement 来说，它还会持有 State 的引用。

这里需要注意，Element 的 child 是 Widget 中 build() 方法构建出来的 Widget 所对应的 Element，下面会用到。

Widget、Element、RenderObject 构建出三棵树 Widget Tree、Element Tree、Render Tree，它们共同组成了 Flutter 对于UI的组织描述。

前两棵树可以认为是面向开发者的，它们构成了声明式UI、响应式UI的基础，Render Tree 用来真正的布局和绘制，最后生成 Layer Tree，并保存在 Scene 对象中，提交给 C++ Engine 做光栅化合成。

那么，可不可以绕开 Widget、Element、RenderObject 来进行绘制，其实是可以的，它们只是用来组织描述绘制信息的，我们可以直接拿到 Canvas 进行绘制，只要最终可以生成Layer Tree 保存在 Scene 中就可以。

例如 这个例子 🌰 。

更进一步的，甚至可以绕过或者舍弃 Dart Framework，直接对接 C++ Engine，任何可以组织描述UI绘制结构的组织形式，理论上都可以桥接到 C++ Engine。

例如基于 W3C 标准的 CSS + JS/TS 组织的UI描述，通过绑定JS与C++ Engine，将绘制信息发送给 Engine，理论上也是可行的，如下图

3、Element.performRebuild()

继续上面分析到 Element.performRebuild()。

分 Element 类型看下实现

ComponentElement：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// lib/src/widgets/framework.dart ComponentElement
	@override
  void performRebuild() {
    Widget built;
    try {
      ...
      built = build();
      ...
    } catch (e, stack) {
      _debugDoingBuild = false;
      // 错误情况，这里是构建红屏的地方
      built = ErrorWidget.builder();
    } finally {
      // 改变标志位
      _dirty = false;
    }
    try {
      ...
      _child = updateChild(_child, built, slot);
    } catch (e, stack) {
      // 错误情况，这里也是构建红屏的地方
      built = ErrorWidget.builder();
      _child = updateChild(null, built, slot);
    }
  }
// lib/src/widgets/framework.dart StatefullElement
  @override
  void performRebuild() {
    if (_didChangeDependencies) {
      // 依赖的祖先节点如果有变化，需要调用
      _state.didChangeDependencies();
      _didChangeDependencies = false;
    }
    super.performRebuild();
  }

主要做了两件事情：

  • build() 构建子 Widget，注意这里是 子Widget
  • _updateChild() 创建或更新子Element，注意这里是 子Element

为什么强调子Widget和子Element，因为在这个Element对象中，它对应的 Widget 和 Element 就是Element自己合它持有的 Widget。这里很容易搞混。

RenderObjectElement：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// lib/src/widgets/framework.dart RenderObjectElement
	@override
  void performRebuild() {
    ...
     
    widget.updateRenderObject(this, renderObject);
  }
// lib/src/widgets/basic Stack
class Stack extends MultiChildRenderObjectWidget {
	@override
  void updateRenderObject(BuildContext context, RenderStack renderObject) {
    assert(_debugCheckHasDirectionality(context));
    renderObject
      ..alignment = alignment
      ..textDirection = textDirection ?? Directionality.of(context)
      ..fit = fit
      ..clipBehavior = overflow == Overflow.visible ? Clip.none : clipBehavior;
  }
}

widget.updateRenderObject() 的作用是把 Widget 中的属性值，绑定到 RenderObject 中，属性的类型一一对应。

3.1、Element.build()

build() 在各个类型的 Element 的实现：

1
2
3
4
5
6
7
8
9
10
11
// StatefullElement
	@override
  Widget build() => _state.build(this);
// StatelessElement
  @override
  Widget build() => widget.build(this);
// ProxyElement
  @override
  Widget build() => widget.child;

3.2、Element.updateChild()

这个方法是响应式UI的基础，也是 Dart Framework 的核心方法之一，看下实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@protected
Element updateChild(Element child, Widget newWidget, dynamic newSlot) {
  if (newWidget == null) {
    // case 1
    if (child != null)
      deactivateChild(child);
    return null;
  }
  Element newChild;
  if (child != null) {
    // case 2
    bool hasSameSuperclass = true;
    ...
    if (hasSameSuperclass && child.widget == newWidget) {
      // case 2.1
      if (child.slot != newSlot)
        updateSlotForChild(child, newSlot);
      newChild = child;
    } else if (hasSameSuperclass && Widget.canUpdate(child.widget, newWidget)) {
      // case 2.2
      if (child.slot != newSlot)
        updateSlotForChild(child, newSlot);
      child.update(newWidget);
      newChild = child;
    } else {
      // case 2.3
      deactivateChild(child);
      newChild = inflateWidget(newWidget, newSlot);
    }
  } else {
    // case 3
    newChild = inflateWidget(newWidget, newSlot);
  }
  return newChild;
}

首先要先明确，这个方法是用来更新子树的，第一个参数 child 是 子Element，第二个参数newWidget是 子Widget 。

分几种情况：

  • case 1：newWidget 为空，也就是当前 Element 节点对应的 Widget build() 返回了空，那么标记child为非激活状态(当前帧绘制完成后会被卸载)，然后返回空
  • case 2：如果child不为空，也就是之前构建过一次子Element
    • case 2.1：如果子Element对应的widget 即 child.widget 和新构建的 newWidget 相等，直接更新子widget，如果插槽不同，更新下插槽
    • case 2.2：如果 Widget.canUpdate(child.widget, newWidget) ，判断标准是 runtimeType 和key 都相等，那么调用 update() 更新 child
    • case 2.3：否则child不可复用，标记child为非激活状态(当前帧绘制完成后会被卸载)，然后构建出一个新的 Element 节点，挂载到Element Tree上
  • case 3：否则 child 为空，不可复用，构建出一个新的 Element 节点，挂载到Element Tree上

下面看下几个关键的方法

3.3、Element.update()

Element 类实现：

1
2
3
4
5
// lib/src/widgets/framework.dart Element  
	@mustCallSuper // 子类复写该方法必须调用super
  void update(covariant Widget newWidget) {
    _widget = newWidget;
  }

直接更新 Element 子节点的 _widget 引用。

子类复写该方法必须调用super。

看下子类的实现。

3.3.1、RenderObjectElement.update()

1
2
3
4
5
6
7
8
abstract class RenderObjectElement extends Element {
	@override
  void update(covariant RenderObjectWidget newWidget) {
    super.update(newWidget);
    widget.updateRenderObject(this, renderObject);
    _dirty = false;
  }
}

同上面一样，把 newWidget 中的属性值，绑定到 RenderObject 中。

SingleChildRenderObjectElement、MultiChildRenderObjectElement 是 RenderObjectElement 的子类，分别看下实现。

1
2
3
4
5
6
7
8
class SingleChildRenderObjectElement extends RenderObjectElement {
  @override
  void update(SingleChildRenderObjectWidget newWidget) {
    super.update(newWidget);
    // 更新子树
    _child = updateChild(_child, widget.child, null);
  }
}
  • 调用super，复用 RenderObjectElement.update() 逻辑
  • 更新子树
1
2
3
4
5
6
7
8
class MultiChildRenderObjectElement extends RenderObjectElement {
  @override
  void update(MultiChildRenderObjectWidget newWidget) {
    super.update(newWidget);
    _children = updateChildren(_children, widget.children, forgottenChildren: _forgottenChildren);
    _forgottenChildren.clear();
  }
}
  • 调用super，复用 RenderObjectElement.update() 逻辑
  • 通过差分算法将新构造的 widget.children 绑定到已有的 _children 上来更新子树，updateChildren() 逻辑虽然看起来很多，但是还比较好理解，这里就不放源码了，说下逻辑
    • 首先从 topIndex 到 bottomIndex 遍历 oldChildElement 和 newChildWidget，如果Widget.canUpdate(oldChild.widget, newWidget)，那么updateChild()更新子树 updateChild()，直到匹配失败，记录 topIndex 累加值
    • 从 bottomIndex 到 topIndex 遍历oldChildElement 和 newChildWidget，直到匹配失败，记录 bottomIndex 累减值，这里不更新子树
    • 遍历缩小了的 oldChildElement 列表，记录 oldChild.widget.key 和 oldChild 到 map，key为空的反激活
    • 遍历缩小了的 newChildWidget 列表，匹配 map 中的key类型，updateChild() 更新子树，未匹配到的反激活
    • 最后更新第二步得到剩余的部分

3.3.2、StatefullElement.update()

1
2
3
4
5
6
7
8
9
10
11
12
13
@override
void update(StatefulWidget newWidget) {
  super.update(newWidget);
  final StatefulWidget oldWidget = _state._widget;
  // Notice that we mark ourselves as dirty before calling didUpdateWidget to
  // let authors call setState from within didUpdateWidget without triggering
  // asserts.
  _dirty = true;
  _state._widget = widget as StatefulWidget;
  final dynamic debugCheckForReturnedFuture = _state.didUpdateWidget(oldWidget) as dynamic;
  // 更新子树
  rebuild();
}
  • 调用 super
  • 更新 state 中 widget 的引用
  • 调用 _state.didUpdateWidget(oldWidget)
  • 调用 rebuild() 更新子树，由于 rebuild() 一定会触发 build() 方法调用，所以这里进行标脏

StatelessElement.update() 类似，不写出来了。

3.4、Element.inflateWidget()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@protected
Element inflateWidget(Widget newWidget, dynamic newSlot) {
  final Key key = newWidget.key;
  if (key is GlobalKey) {
    // 如果key类型是 GlobalKey，从非激活状态的列表中尝试匹配类型相同的节点，抢救复用一下
    final Element newChild = _retakeInactiveElement(key, newWidget);
    if (newChild != null) {
      newChild._activateWithParent(this, newSlot);
      final Element updatedChild = updateChild(newChild, newWidget, newSlot);
      return updatedChild;
    }
  }
  // 通过 Widget，创建对应的 Element
  final Element newChild = newWidget.createElement();
// 挂载到 Element Tree 上
  newChild.mount(this, newSlot);
  return newChild;
}
  • 如果key类型是 GlobalKey，从非激活状态的列表中尝试匹配类型相同的节点，抢救性复用一下
  • 通过 Widget，创建对应的 Element
  • 挂载到 Element Tree 上

3.5、Element.mount()

挂载到Element Tree上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@mustCallSuper
void mount(Element parent, dynamic newSlot) {
  // 更新父节点信息
  _parent = parent;
  // 更新插槽信息
  _slot = newSlot;
  // 更新深度
  _depth = _parent != null ? _parent.depth + 1 : 1;
  // 从初始化状态更改为激活状态
  _active = true;
  if (parent != null) 
    // 绑定 BuildOwner 对象
    _owner = parent.owner;
  final Key key = widget.key;
  if (key is GlobalKey) {
    // 如果是 GlobalKey，注册到公共map，全局复用
    key._register(this);
  }
  // 从 parent 更新 _inheritedWidgets，用于传递附加信息
  _updateInheritance();
}
  • 更新父节点信息
  • 更新插槽信息
  • 更新深度
  • 从初始化状态更改为激活状态
  • 绑定 BuildOwner 对象
  • 如果是 GlobalKey，注册到公共map，全局复用
  • 从 parent 更新 _inheritedWidgets，用于传递附加信息

如果子类复写该方法，那么必须要调用 super。

3.5.1、ComponentElement.mount()

1
2
3
4
5
6
7
8
9
10
11
abstract class ComponentElement extends Element {  
	@override
  void mount(Element parent, dynamic newSlot) {
    super.mount(parent, newSlot);
    _firstBuild();
  }
  void _firstBuild() {
    rebuild();
  }
}
  • 调用 super() 调用 Element.mount()
  • 调用 _firstBuild() -> rebuild() -> performRebuild() 构建 Element 子树

下面还有 SingleChildRenderObjectElement 、MultiChildRenderObjectElement 等子类，逻辑跟update()差不多，就不列出来了。

3.5.2、RenderObjectElement.mount()

1
2
3
4
5
6
7
8
9
10
11
abstract class RenderObjectElement extends Element {
	@override
  void mount(Element parent, dynamic newSlot) {
    super.mount(parent, newSlot);
    // 构建 RenderObject
    _renderObject = widget.createRenderObject(this);
		// 将 RenderObject 挂载到 Render Tree 上
    attachRenderObject(newSlot);
    _dirty = false;
  }
}
  • 调用 super() 调用 Element.mount()
  • 构建 RenderObject
  • 将 RenderObject 挂载到 Render Tree 上

3.6、RenderObjectElement.attachRenderObject()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
abstract class RenderObjectElement extends Element {  
	@override
  void attachRenderObject(dynamic newSlot) {
    _slot = newSlot;
    // Element Tree 向上遍历祖先节点，找到第一个 RenderObject 节点
    _ancestorRenderObjectElement = _findAncestorRenderObjectElement();
    // 根据规则插入到 Render Tree 中，需要子类实现
    _ancestorRenderObjectElement?.insertChildRenderObject(renderObject, newSlot);
    // Element Tree 向上遍历祖先节点，找到第一个 ParentDataElement 节点
    final ParentDataElement<ParentData> parentDataElement = _findAncestorParentDataElement();
    if (parentDataElement != null)
      _updateParentData(parentDataElement.widget);
  }
  
  void _updateParentData(ParentDataWidget<ParentData> parentDataWidget) {
    ...
    parentDataWidget.applyParentData(renderObject);
  }
}
  • Element Tree 向上遍历祖先节点，找到第一个 RenderObject 节点
  • 根据规则插入到 Render Tree 中，需要子类实现，这里就构建出了 Render Tree，为下面 Layout、Paint 等过程做准备，下篇文章会详细分析
  • Element Tree 向上遍历祖先节点，找到第一个 ParentDataElement 节点，ParentDataElement 节点中记录着布局位置等信息，如果没有找到返回空
  • 根据 ParentDataElement 找到对应的 ParentDataWidget，调用 applyParentData()

其中，ParentDataElement 根据参数绑定了 ParentDataWidget 类型，并通过泛型绑定了 ParentData 类型。

3.6.1、ParentDataWidget.applyParentData()

ParentDataWidget 是 ProxyWidget 的子类，它的子类包括 Flexible、LayoutId、Positioned、KeepAlive 等Widget。

ParentDataWidget 使用泛型绑定了 ParentData 类型。

以 Flexible 为例看下实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class Flexible extends ParentDataWidget<FlexParentData> {
    @override
  void applyParentData(RenderObject renderObject) {
    final FlexParentData parentData = renderObject.parentData as FlexParentData;
    bool needsLayout = false;
    if (parentData.flex != flex) {
      parentData.flex = flex;
      needsLayout = true;
    }
    if (parentData.fit != fit) {
      parentData.fit = fit;
      needsLayout = true;
    }
    if (needsLayout) {
      final AbstractNode targetParent = renderObject.parent;
      if (targetParent is RenderObject)
        targetParent.markNeedsLayout();
    }
  }
}
  • 更新布局属性信息
  • RenderObject 节点 Layout 标脏，记录在 BuildOwner._nodesNeedingLayout 列表中，等待下一步 Layout 处理

4、总结

本篇文章介绍了 WidgetsBinding.drawFrame() 的过程，以及 Widget、Element、RenderObject 及三棵树的关系，梳理了build() 过程在三棵树之间的流转关系，通过 Element Tree 和 Widget Tree 构建 Render Tree，最终触发 RenderObject.markNeedsLayout() Layout 标脏操作，记录在 BuildOwner._nodesNeedingLayout 列表中，等待下一步 Layout 处理。

下一篇文章将继续分析 Render Tree 的构建过程及 RendererBinding.drawFrame() 中 Layout 过程。

参考

本文链接： http://w4lle.com/2020/11/16/flutter-ui-build/

版权声明：本文为 w4lle 原创文章，可以随意转载，但必须在明确位置注明出处！
本文链接： http://w4lle.com/2020/11/16/flutter-ui-build/