Flutter中Widget,Element,RenderObject

三种树

Flutter中的Widget根据类型不同,大体上可以分为以下几种:

Widget 分类

在根Widget类中有一个抽象方法createElement(),也就意味着所有的Widget子类必须实现此方法:

StatelessWidget :

 StatelessElement createElement() => StatelessElement(this);

StateFulWidget :

  StatefulElement createElement() => StatefulElement(this);

SingleChildRenderObjectWidget :

 SingleChildRenderObjectElement createElement() => SingleChildRenderObjectElement(this);

MultiChildRenderObjectWidget :

MultiChildRenderObjectElement createElement() => MultiChildRenderObjectElement(this);

从源码中可以看到,每种Widget都会调用createElement(),返回不同的Element对象.并且会传入当前的Widget,而Element中会引用传过来的Widget:

  Element(Widget widget)
    : assert(widget != null),
      _widget = widget;

`所以 Element 中会持有 widget`

需要注意StatefulElement的构造方法:

  StatefulElement(StatefulWidget widget)
      : _state = widget.createState(), //调用 widget 的 createState() 方法,生成 state
        super(widget) {
    assert(state._element == null);
    state._element = this;
    state._widget = widget; // 把 widget 赋值给 state 中的 widget
    assert(state._debugLifecycleState == _StateLifecycle.created);
  }

可以看到在StatefulElement的构造方法中,会调用widget的createState()方法,并且会把widget赋值给state.widget,所以我们能在state中直接使用widget.

Element还有一个很关键的方法mount,如下:

  void mount(Element? parent, Object? newSlot) {
    assert(_lifecycleState == _ElementLifecycle.initial);
    assert(widget != null);
    assert(_parent == null);
    assert(parent == null || parent._lifecycleState == _ElementLifecycle.active);
    assert(slot == null);
    _parent = parent;
    _slot = newSlot;
    _lifecycleState = _ElementLifecycle.active;
    _depth = _parent != null ? _parent!.depth + 1 : 1;
    if (parent != null) {
      // Only assign ownership if the parent is non-null. If parent is null
      // (the root node), the owner should have already been assigned.
      // See RootRenderObjectElement.assignOwner().
      _owner = parent.owner;
    }
    assert(owner != null);
    final Key? key = widget.key;
    if (key is GlobalKey) {
      owner!._registerGlobalKey(key, this);
    }
    _updateInheritance();
  }

Flutter框架会根据Widget创建对应的Element,不同的Widget创建的Element类型也是不一样的,常用的Element有以下几种:

Element

Element生成以后会调用Element的mount方法,将生成的Element挂载到Element树上.这里的 createElement 和mount 都是 Flutter框架自动调用的，不需要开发者手动调用。因此我们平时可能没关注这些过程。Element里面的 mount方法需要子类实现，我们来看看ComponentElement里的 mount方法:


  void mount(Element? parent, Object? newSlot) {
    super.mount(parent, newSlot);
    assert(_child == null);
    assert(_lifecycleState == _ElementLifecycle.active);
    _firstBuild(); //调用 _firstBuild()方法
    assert(_child != null);
  }

顺着_firstBuild()查看,发现他们的调用链如下:

mount 方法调用链

StatelessElement 的 build()方法实现如下:

  Widget build() => widget.build(this);

最后实际调用的是Widget的build()方法;

而StatefulElement中build()方法有些不一样:

  Widget build() => state.build(this);

StatefulElement中build()方法实际调用的是state 的 build()方法.

小总结:

创建 widget 时,Flutter 框架会自动调用 createElement() 生成对应的 Element,Element 生成后会自动调用 Element 的 mount() 方法将当前的 Element 挂载到 Element 数上.而在 mount() 方法内部会调用 StateLessWidget 的 build() 方法和 StateFulWidget 中 State 的 build() 方法.

现在我们知道了Element中的mount()方法最终都会调用build(this)方法,并且传递的都是当前的Element对象,而build()方法的格式如下:

 Widget build(BuildContext context) { }

所以,我们在写代码时看到的BuildContext context就是Element:

上面介绍的是ComponentElement 中的 mount()方法,下面我们看看RenderObjectElement 中的 mount() 方法:

  void mount(Element? parent, Object? newSlot) {
    super.mount(parent, newSlot);
    ...
    _renderObject = widget.createRenderObject(this);
    ...
}

可以看到RenderObjectElement中的mount()方法主要调用的是Widget中的widget.createRenderObject ()方法生成 RenderObject，然后赋值给自己的 _renderObject。

因此可以总结:

一: ComponentElement 的 mount 方法主要作用是执行 build

二: RenderObjectElement 的 mount 方法主要作用是执行`createRenderObject()`生成 RenderObject

`Widget`中还有一个很重要的方法`static bool canUpdate()`:

 static bool canUpdate(Widget oldWidget, Widget newWidget) {
    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
  }

为了进行Element复用，在Element重新构建前会先尝试是否可以复用旧树上相同位置的element，element节点在更新前都会调用其对应Widget的canUpdate方法，主要是判断newWidget与oldWidget的runtimeType和key是否同时相等，如果同时相等就返回true，表示复用旧Element，否则返回false，重新创建。

写这篇文章是为了方便自己复习,参考了这边文章,更详细的请查看Flutter渲染之Widget、Element 和 RenderObject

Flutter中Widget,Element,RenderObject