Flutter之Widget和Element

---

一、Widget

Flutter是移动UI框架，Widget组件是UI的基础。

Widget继承关系图

它们都是抽象类，继承Widget，开发中与StatelessWidget、StatefulWidget类打交道最多，继承两者实现自定义Widget。
1，StatelessWidget，状态不会改变的Widget。

abstract class StatelessWidget extends Widget {
  const StatelessWidget({ Key key }) : super(key: key);
  @override
  StatelessElement createElement() => StatelessElement(this);
  @protected
  Widget build(BuildContext context);
}

build()是抽象方法，每一个类型Widget都对应一种Element，createElement()方法创建。
2，StatefulWidget，状态会改变的Widget组件，需要指定一个State类，根据状态改变时，setState()方法刷新UI，组件会重新build。
定义抽象方法createState()。

abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key key }) : super(key: key);
  @override
  StatefulElement createElement() => StatefulElement(this);
  @protected
  State createState();
}

抽象类State<T extends StatefulWidget>，提供初始化initState()方法，刷新setState()方法，抽象方法build(),构造Widget，(和StatefulWidget关联)。

build()返回的Widget和它本身的关系：
本质上是由该Widget对应Element的build()方法触发，通过调用Widget或State的build()方法，并没有将当前Widget和返回Widget建立树关系，而是利用返回Widget，为其构建Element，同时mount()挂载，因此，在Flutter中，真正实现树结构的是Element。

3， RenderObjectWidget，三个子类。
LeafRenderObjectWidget，叶子节点。
SingleChildRenderObjectWidget，只有一个Child，包含一个 final Widget child;，子类在构造方法初始化child Widget，例如 Center类。
MultiChildRenderObjectWidget，有多个Child，包含一个 final List<Widget> children;列表，子类在构造方法初始化children数组，例如 Column，Row类。

二、Element

真正的视图树结构

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

基类Element构造方法，初始化Element关联的_widget组件。

Element类继承关系

不同Widget，createElement()方法，创建不同Element，mount()方法也不同，Widget和Element对应关系。

Widget	Element
StatelessWidget	StatelessElement
StatefulWidget	StatefulElement
RenderObjectElement	RenderObjectElement
LeafRenderObjectWidget	LeafRenderObjectElement
SingleChildRenderObjectWidget	SingleChildRenderObjectElement
MultiChildRenderObjectWidget	MultiChildRenderObjectElement

RootRenderObjectElement，根节点视图。LeafRenderObjectElement，没有子视图，(叶子节点)。
SingleChildRenderObjectElement，仅有一个子视图。
MultiChildRenderObjectElement，有多个子视图。

1，StatelessElement和StatefulElement类

class StatelessElement extends ComponentElement {
  StatelessElement(StatelessWidget widget) : super(widget);
  @override
  StatelessWidget get widget => super.widget;
  @override
  Widget build() => widget.build(this);
  ...
}

build()方法，调用关联widget的build()方法，返回Widget。

class StatefulElement extends ComponentElement {
    StatefulElement(StatefulWidget widget)
      : _state = widget.createState(),
    _state._element = this;
    _state._widget = widget;
}

StatefulElement构造方法，参数StatefulWidget组件，createState()方法，初始化State对象，State关联Element和StatefulWidget，
StatefulElement类的build()方法，调用关联State的build()方法，返回Widget。

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

State的build()方法，参数this，(BuildContext类型)，其实，Element实现BuildContext。

开发者重写StatelessWidget或State<T extends StatefulWidget>的build()方法，(返回Widget)，都是由Element负责调用。

2，ComponentElement的挂载

StatelessElement和StatefulElement类都继承ComponentElement，它们的挂载由基础ComponentElement的mount()挂载方法。
mount的意思是将这个节点挂到树上去。

@override
void mount(Element parent, dynamic newSlot) {
  super.mount(parent, newSlot);
  _firstBuild();
}

super.mount()基类Element的挂载方法，即初始化_parent = parent;，指将该节点指向入参父Element。
调用流程：_firstBuild() == > rebuild() == > performRebuild()。
(performRebuild是Element的抽象类，如下ComponentElement类实现)。

@override
void performRebuild() {
  Widget built;
  try {
    //调用widget的build或state的build。
    built = build();
  } catch (e, stack) {
  } 
  try {
    //将调用inflateWidget()方法，_child：内部的子Element。
    _child = updateChild(_child, built, slot);
    assert(_child != null);
  } catch (e, stack) {
  }
}

通过build()方法，创建Widget，根据不同类型Element，Widget或State的build()方法，(即开发重写的即该方法)。
新创建的Widget(built)，作为该Element子节点的配置，updateChild()方法，初始化子Element节点，ComponentElement类保存一份Element _child;。
Element基类的inflateWidget()，根据Widget构造Element。

@protected
Element inflateWidget(Widget newWidget, dynamic newSlot) {
  final Key key = newWidget.key;
  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;
    }
  }
  //调用widget自己重写的createElement()方法
  final Element newChild = newWidget.createElement();
  //挂载
  newChild.mount(this, newSlot);
  return newChild;
}

创建的子Element节点挂载mount到自己上，this即内部_parent，Element是树形结构，每一个视图对应Element。

ComponentElement类挂载mount()，将触发build方法，构建widget对象，再去inflateWidget()，为Widget生成Element，挂载，初始化构建Element树。

3，RenderObjectElement子类的挂载

Element类基础mount()方法，将内部_parent设置父视图Element。
SingleChildRenderObjectElement类，有一个子元素。

@override
void mount(Element parent, dynamic newSlot) {
    super.mount(parent, newSlot);
    _child = updateChild(_child, widget.child, null);
}

super.mount()挂载，初始化_parent和内部_child元素，根据widget的child，和ComponentElement挂载类似(build方法产生的子Widget)，updateChild()方法直接处理子Widget，(widget.child)，生成_child元素。
(widget对应SingleChildRenderObjectWidget，内部child Widget。)
MultiChildRenderObjectElement类，有多个子元素。

@override
void mount(Element parent, dynamic newSlot) {
  super.mount(parent, newSlot);
  _children = List<Element>(widget.children.length);
  Element previousChild;
  for (int i = 0; i < _children.length; i += 1) {
    final Element newChild = inflateWidget(widget.children[i], previousChild);
    _children[i] = newChild;
    previousChild = newChild;
  }
}

遍历该widget的child数组中每一个widget，通过Element的inflateWidget()，获取每一个子widget的Element，内部保存_children数组(Element)。

---

任重而道远