跟我学flutter：细细品Widget（五）Element

王二蛋与他的张大花
121 阅读8分钟

前言

之前的文章都有简述Element，这篇将着重去讲Element Widget是描述一个UI元素的配置数据，Element才真正代表屏幕显示元素

分类

在这里插入图片描述 如上图所示Element分为两类

  • ComponentElement ： 组合类Element。这类Element主要用来组合其他更基础的Element，得到功能更加复杂的Element。开发时常用到的StatelessWidget和StatefulWidget相对应的Element：StatelessElement和StatefulElement，即属于ComponentElement。

  • RenderObjectElement ： 渲染类Element，对应Renderer Widget，是框架最核心的Element。RenderObjectElement主要包括LeafRenderObjectElement（叶子无节点），SingleChildRenderObjectElement（单child），和MultiChildRenderObjectElement（多child）。

Element生命周期

Element有4种状态：initial，active，inactive，defunct。其对应的意义如下：

  • initial：初始状态，Element刚创建时就是该状态。
  • active：激活状态。此时Element的Parent已经通过mount将该Element插入Element Tree的指定的插槽处（Slot），Element此时随时可能显示在屏幕上。
  • inactive：未激活状态。当Widget Tree发生变化，Element对应的Widget发生变化，同时由于新旧Widget的Key或者的RunTimeType不匹配等原因导致该Element也被移除，因此该Element的状态变为未激活状态，被从屏幕上移除。并将该Element从Element Tree中移除，如果该Element有对应的RenderObject，还会将对应的RenderObject从Render Tree移除。但是，此Element还是有被复用的机会，例如通过GlobalKey进行复用。
  • defunct：失效状态。如果一个处于未激活状态的Element在当前帧动画结束时还是未被复用，此时会调用该Element的unmount函数，将Element的状态改为defunct，并对其中的资源进行清理。

Element4种状态间的转换关系如下图所示：

在这里插入图片描述

ComponentElement

在这里插入图片描述

State和StatefulElement是一一对应的，只有在初始化StatefulElement时，才会初始化对应的State并将其绑定到StatefulElement上

核心流程

一个Element的核心操作流程有，创建、更新、销毁三种，下面将分别介绍这三个流程。

创建

在这里插入图片描述 ComponentElement的创建起源与父Widget调用inflateWidget，然后通过mount将该Element挂载至Element Tree，并递归创建子节点。

更新

在这里插入图片描述 由父Element执行更新子节点的操作（updateChild），由于新旧Widget的类型和Key均未发生变化，因此触发了Element的更新操作，并通过performRebuild将更新操作传递下去。其核心函数updateChild之后会详细介绍。

销毁

在这里插入图片描述 由父Element或更上级的节点执行更新子节点的操作（updateChild），由于新旧Widget的类型或者Key发生变化，或者新Widget被移除，因此导致该Element被转为未激活状态，并被加入未激活列表，并在下一帧被失效。

核心函数

  • inflateWidget
Element inflateWidget(Widget newWidget, dynamic newSlot) {
  final Key key = newWidget.key;
//复用GlobalKey对应的Element
  if (key is GlobalKey) {
    final Element newChild = _retakeInactiveElement(key, newWidget);
    if (newChild != null) {
      newChild._activateWithParent(this, newSlot);
      final Element updatedChild = updateChild(newChild, newWidget, newSlot);
      return updatedChild;
    }
  }
//创建Element，并挂载至Element Tree
  final Element newChild = newWidget.createElement();
  newChild.mount(this, newSlot);
  return newChild;
}
  1. 判断新Widget是否有GlobalKey，如果有GlobalKey，则从Inactive Elements列表中找到对应的Element并进行复用。（可能从树的另一个位置嫁接或重新激活）
  2. 无可复用Element，则根据新Widget创建对应的Element，并将其挂载至Element Tree。
  • mount
void mount(Element parent, dynamic newSlot) {
//更新_parent等属性，将元素加入Element Tree
  _parent = parent;
  _slot = newSlot;
  _depth = _parent != null ? _parent.depth + 1 : 1;
  _active = true;
  if (parent != null) // Only assign ownership if the parent is non-null
    _owner = parent.owner;
//注册GlobalKey
  final Key key = widget.key;
  if (key is GlobalKey) {
    key._register(this);
  }
  _updateInheritance();
}
  1. 将给Element加入Element Tree，更新_parent，_slot等树相关的属性。
  2. 如果新Widget有GlobalKey，将该Element注册进GlobalKey中，其作用下文会详细分析。
  3. ComponentElement的mount函数会调用_firstBuild函数，触发子Widget的创建和更新。
  • performRebuild
@override
void performRebuild() {
//调用build函数，生成子Widget
  Widget built;
  built = build();
//根据新的子Widget更新子Element
  _child = updateChild(_child, built, slot);
}
  1. 调用build函数，生成子Widget。
  2. 根据新的子Widget更新子Element。
  • update
@mustCallSuper
void update(covariant Widget newWidget) {
  _widget = newWidget;
}
  1. 将对应的Widget更新为新的Widget。
  2. 在ComponentElement的各种子类中，还会调用rebuild函数触发对子Widget的重建。
  • updateChild
@protected
Element updateChild(Element child, Widget newWidget, dynamic newSlot) {
  if (newWidget == null) {
//新的Child Widget为null，则返回null；如果旧Child Widget，使其未激活
    if (child != null)
      deactivateChild(child);
    return null;
  }
  Element newChild;
  if (child != null) {
//新的Child Widget不为null，旧的Child Widget也不为null
    bool hasSameSuperclass = true;
    if (hasSameSuperclass && child.widget == newWidget) {
      if (child.slot != newSlot)
        updateSlotForChild(child, newSlot);
      newChild = child;
    } else if (hasSameSuperclass && Widget.canUpdate(child.widget, newWidget)){
//Key和RuntimeType相同，使用update更新
      if (child.slot != newSlot)
        updateSlotForChild(child, newSlot);
      child.update(newWidget);
      newChild = child;
    } else {
//Key或RuntimeType不相同，使旧的Child Widget未激活，并对新的Child Widget使用inflateWidget
      deactivateChild(child);
      newChild = inflateWidget(newWidget, newSlot);
    }
  } else {
//新的Child Widget不为null，旧的Child Widget为null，对新的Child Widget使用inflateWidget
    newChild = inflateWidget(newWidget, newSlot);
  }

  return newChild;
}

根据新的子Widget，更新旧的子Element，或者得到新的子Element。 逻辑如下（伪代码）：

if（newWidget == null）{
	if(Child == null){
		return null;
	}else{
		移除旧的子Element，返回null
	}
}else{
	if(Child == null){
		返回新Element
	}else{
		如果Widget能更新，更新旧的子Element，并返回之；否则创建新的子Element并返回。
	}
}

该逻辑概括如下：

  1. 如果newWidget为null，则返回null，同时如果有旧的子Element则移除之。
  2. 如果newWidget不为null，旧Child为null，则创建新的子Element，并返回之。
  3. 如果newWidget不为null，旧Child不为null，新旧子Widget的Key和RuntimeType等都相同，则调用update方法更新子Element并返回之。
  4. 如果newWidget不为null，旧Child不为null，新旧子Widget的Key和RuntimeType等不完全相同，则说明Widget Tree有变动，此时移除旧的子Element，并创建新的子Element，并返回之。

RenderObjectElement

RenderObjectElement同核心元素Widget及RenderObject之间的关系如下图所示： 在这里插入图片描述 如图：

RenderObjectElement持有Parent Element，但是不一定持有Child Element，有可能无Child Element，有可能持有一个Child Element（Child），有可能持有多个Child Element(Children)。 RenderObjectElement持有对应的Widget和RenderObject，将Widget、RenderObject串联起来，实现了Widget、Element、RenderObject之间的绑定。

核心流程

如ComponentElement一样，RenderObjectElement的核心操作流程有，创建、更新、销毁三种，接下来会详细介绍这三种流程。

  • 创建 -在这里插入图片描述

RenderObjectElement的创建流程和ComponentElement的创建流程基本一致，其最大的区别是ComponentElement在mount后，会调用build来创建子Widget，而RenderObjectElement则是create和attach其RenderObject。

  • 更新 在这里插入图片描述 RenderObjectElement的更新流程和ComponentElement的更新流程也基本一致，其最大的区别是ComponentElement的update函数会调用build函数，重新触发子Widget的构建，而RenderObjectElement则是调用updateRenderObject对绑定的RenderObject进行更新。

  • 销毁 在这里插入图片描述 RenderObjectElement的销毁流程和ComponentElement的销毁流程也基本一致。也是由父Element或更上级的节点执行更新子节点的操作（updateChild），导致该Element被停用，并被加入未激活列表，并在下一帧被失效。其不一样的地方是在unmount Element的时候，会调用didUnmountRenderObject失效对应的RenderObject。

核心函数

  • inflateWidget 该函数和ComponentElement的inflateWidget函数完全一致，此处不再复述。

  • mount

void mount(Element parent, dynamic newSlot) {
  super.mount(parent, newSlot);
  _renderObject = widget.createRenderObject(this);
  attachRenderObject(newSlot);
  _dirty = false;
}

该函数的调用时机和ComponentElement的一致，当Element第一次被插入Element Tree的时候，该方法被调用。其主要职责也和ComponentElement的一致，此处只列举不一样的职责，职责如下：

  1. 调用createRenderObject创建RenderObject，并使用attachRenderObject将RenderObject关联到Element上。
  2. SingleChildRenderObjectElement会调用updateChild更新子节点，MultiChildRenderObjectElement会调用每个子节点的inflateWidget重建所有子Widget。
  • performRebuild
@override
void performRebuild() {
//更新renderObject
  widget.updateRenderObject(this, renderObject);
  _dirty = false;
}

performRebuild的主要职责如下：

调用updateRenderObject更新对应的RenderObject。

  • update
@override
void update(covariant RenderObjectWidget newWidget) {
  super.update(newWidget);
  widget.updateRenderObject(this, renderObject);
  _dirty = false;
}

update的主要职责如下：

  1. 将对应的Widget更新为新的Widget。
  2. 调用updateRenderObject更新对应的RenderObject。
  • updateChild
@protected
List<Element> updateChildren(List<Element> oldChildren, List<Widget> newWidgets, { Set<Element> forgottenChildren }) {
  int newChildrenTop = 0;
  int oldChildrenTop = 0;
  int newChildrenBottom = newWidgets.length - 1;
  int oldChildrenBottom = oldChildren.length - 1;

  final List<Element> newChildren = oldChildren.length == newWidgets.length ?
      oldChildren : List<Element>(newWidgets.length);

  Element previousChild;

// 从顶部向下更新子Element
  // Update the top of the list.
  while ((oldChildrenTop <= oldChildrenBottom) && (newChildrenTop <= newChildrenBottom)) {
    final Element oldChild = replaceWithNullIfForgotten(oldChildren[oldChildrenTop]);
    final Widget newWidget = newWidgets[newChildrenTop];
    if (oldChild == null || !Widget.canUpdate(oldChild.widget, newWidget))
      break;
    final Element newChild = updateChild(oldChild, newWidget, IndexedSlot<Element>(newChildrenTop, previousChild));
    newChildren[newChildrenTop] = newChild;
    previousChild = newChild;
    newChildrenTop += 1;
    oldChildrenTop += 1;
  }

// 从底部向上扫描子Element
  // Scan the bottom of the list.
  while ((oldChildrenTop <= oldChildrenBottom) && (newChildrenTop <= newChildrenBottom)) {
    final Element oldChild = replaceWithNullIfForgotten(oldChildren[oldChildrenBottom]);
    final Widget newWidget = newWidgets[newChildrenBottom];
    if (oldChild == null || !Widget.canUpdate(oldChild.widget, newWidget))
      break;
    oldChildrenBottom -= 1;
    newChildrenBottom -= 1;
  }

// 扫描旧的子Element列表里面中间的子Element，保存Widget有Key的Element到oldKeyChildren，其他的失效
  // Scan the old children in the middle of the list.
  final bool haveOldChildren = oldChildrenTop <= oldChildrenBottom;
  Map<Key, Element> oldKeyedChildren;
  if (haveOldChildren) {
    oldKeyedChildren = <Key, Element>{};
    while (oldChildrenTop <= oldChildrenBottom) {
      final Element oldChild = replaceWithNullIfForgotten(oldChildren[oldChildrenTop]);
      if (oldChild != null) {
        if (oldChild.widget.key != null)
          oldKeyedChildren[oldChild.widget.key] = oldChild;
        else
          deactivateChild(oldChild);
      }
      oldChildrenTop += 1;
    }
  }

// 根据Widget的Key更新oldKeyChildren中的Element。
  // Update the middle of the list.
  while (newChildrenTop <= newChildrenBottom) {
    Element oldChild;
    final Widget newWidget = newWidgets[newChildrenTop];
    if (haveOldChildren) {
      final Key key = newWidget.key;
      if (key != null) {
        oldChild = oldKeyedChildren[key];
        if (oldChild != null) {
          if (Widget.canUpdate(oldChild.widget, newWidget)) {
            // we found a match!
            // remove it from oldKeyedChildren so we don't unsync it later
            oldKeyedChildren.remove(key);
          } else {
            // Not a match, let's pretend we didn't see it for now.
            oldChild = null;
          }
        }
      }
    }

    final Element newChild = updateChild(oldChild, newWidget, IndexedSlot<Element>(newChildrenTop, previousChild));
    newChildren[newChildrenTop] = newChild;
    previousChild = newChild;
    newChildrenTop += 1;
  }

  newChildrenBottom = newWidgets.length - 1;
  oldChildrenBottom = oldChildren.length - 1;

  // 从下到上更新底部的Element。.
  while ((oldChildrenTop <= oldChildrenBottom) && (newChildrenTop <= newChildrenBottom)) {
    final Element oldChild = oldChildren[oldChildrenTop];
    final Widget newWidget = newWidgets[newChildrenTop];
    final Element newChild = updateChild(oldChild, newWidget, IndexedSlot<Element>(newChildrenTop, previousChild));
    newChildren[newChildrenTop] = newChild;
    previousChild = newChild;
    newChildrenTop += 1;
    oldChildrenTop += 1;
  }

// 清除旧子Element列表中其他所有剩余Element
  // Clean up any of the remaining middle nodes from the old list.
  if (haveOldChildren && oldKeyedChildren.isNotEmpty) {
    for (final Element oldChild in oldKeyedChildren.values) {
      if (forgottenChildren == null || !forgottenChildren.contains(oldChild))
        deactivateChild(oldChild);
    }
  }

  return newChildren;
}

该函数的主要职责如下：

  1. 复用能复用的子节点，并调用updateChild对子节点进行更新。
  2. 对不能更新的子节点，调用deactivateChild对该子节点进行失效。

其步骤如下：

  1. 从顶部向下更新子Element。
  2. 从底部向上扫描子Element。
  3. 扫描旧的子Element列表里面中间的子Element，保存Widget有Key的Element到oldKeyChildren，其他的失效。
  4. 对于新的子Element列表，如果其对应的Widget的Key和oldKeyChildren中的Key相同，更新oldKeyChildren中的Element。
  5. 从下到上更新底部的Element。
  6. 清除旧子Element列表中其他所有剩余Element。

文章参考于：zhuanlan.zhihu.com/p/369286610

avatar
文章
阅读
粉丝
相关推荐
跟🤡杰哥一起学Flutter (十三、从Widget源码 ✈ InheritedWidget)
2.4k阅读
 · 
19点赞
Flutter Widget 组件的截图
2.4k阅读
 · 
2点赞
Flutter Widget 之NavigationBar
1.4k阅读
 · 
52点赞
Flutter Widget 之Shortcuts
1.2k阅读
 · 
21点赞
Flutter Widget 之Focus
965阅读
 · 
20点赞
Flutter Widget 之Badges
1.4k阅读
 · 
11点赞
Flutter SDK 自带的 10 个最有用的 Widget
5.6k阅读
 · 
72点赞
Flutter 系列（六）：Flutter 常用表单 Widget
6.6k阅读
 · 
33点赞
Flutter 系列（五）：Flutter 常用按钮 Widget
8.5k阅读
 · 
27点赞
Flutter 系列（四）：Flutter 常用 Widget 二
4.7k阅读
 · 
16点赞

友情链接：