Flutter框架分析（二）-- Widget

1. 前言

Widget是开发Flutter应用过程中，接触最多的概念。Flutter的理念是万物皆Widget（Everything is Widget），这是为了实现Flutter的一个设计理念：激进式组合（Aggressive composability）。Widget由一系列的小的Widget组合而成，而这些进行组合的Widget，本身是由更基础的Widget构成。例如，Padding也是一种Widget，而不是Widget中的一个属性。

在Flutter中，Widget的定义是：描述一个UI元素的配置数据。它并不是表示最终绘制在设备上的显示元素，而只是描述显示元素的一个配置数据。其主要功能包括：

• 描述UI控件（如Text）；
• 描述UI的具体样式（如Color）；
• 描述一些功能（如GestureDetector）；
• 。。。

2. Widget分类

如上图所示，Widget从功能上看，可以分为三大类：

• Component Widget
  组合类Widget。这类Widget主要用来组合其他更基础的Widget，得到功能更加复杂的Widget。平常的业务开发一般用的就是此类Widget。
• Render Widget
  渲染类Widget，这类Widget是框架最核心的Widget，会参与后面的布局和渲染流程；只有这种类型的Widget会绘制到屏幕上。
• Proxy Widget
  代理类Widget，其本身并不涉及Widget内部逻辑，只是为子Widget提供一些附加的中间功能。例如：InheritedWidget用于将一些状态信息传递给子孙Widget。

3. Widget和Element

前面说过，Widget的功能是描述一个UI元素的配置数据，真正代表屏幕上显示元素的类是Element。而且，一个Widget可以对应多个Element，原因是同一个Widget对象可以被添加到UI树的不同部分。关于Element的介绍，以及Widget和Element的关系我们将在后面深入介绍。现在需要记住以下两点：

• Widget是Element的配置数据，Element才真正代表屏幕显示元素；
• 一个Widget对象可以对应多个Element对象。
  以下是一个Widget对象对应多个Element对象的一个示例：

class SameWidgetMultiElementWidget1 extends StatefulWidget {
  @override
  _SameWidgetMultiElementWidgetState createState() => new _SameWidgetMultiElementWidgetState();
}

class _SameWidgetMultiElementWidgetState extends State<SameWidgetMultiElementWidget1> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    Text testText = Text("multi element");
    return Column(
      children: <Widget>[
        testText,
        testText,
      ],
    );
  }
}

其对应的Widget Tree和Element Tree如下：

在上面示例中，左边是Widget Tree，右边是Element Tree。在Widget Tree中，Column有两个子节点，但是这两个子节点使用的是同一个Text对象，因此这个Text对象出现在两个不同的位置（Slot），此时在Element Tree会生成两个不同的StatelessElement对象，即一个Text对象对应两个StatelessElement对象。

4. StatelessWidget

StatelessWidget是我们经常接触的一类widget，其适用于不需要维护组件状态的场景。其核心函数如下：

• createElement
  源码如下：

@override
StatelessElement createElement() => StatelessElement(this);

该函数用于创建StatelessElement，一般用户不用重写该函数。

• build
  源码如下：

@protected
Widget build(BuildContext context);

该函数是Widget的核心方法之一，主要用于向用户提供描绘用户界面的接口。用户通过此函数组合用户需要的子Widget，Framework则通过调用该方法，将用户定义的Widget组合加入到Widget Tree中。其调用场景主要有两种：

1. 此Widget被加入Widget Tree；
2. 此Widget的依赖（depencies）变化，例如此Widget依赖的InheritedWidget变动了。

5. StatefulWidget

StatefulWidget适用于需要维护组件状态的场景，它本身是不可变的，但是它有一个可变的State。因此，它持有的State通常被用于记录状态数据，例如计数器中的计数等。其核心函数如下：

• createElement
  源码如下：

@override
StatefulElement createElement() => StatefulElement(this);

该函数用于创建StatefulElement ，一般用户不用重写该函数。

• createState
  源码如下：

@protected
@factory
State createState();

该函数用于创建对应的State，用户通过该方法创建其需要保存数据的State。Framework在一个StatefulWidget的生命周期内，可能会多次调用该函数。例如，假如一个StatefulWidget被加入Widget Tree多个位置，Framework将为每个位置创建一个单独的State.

6. State

State表示对应的StatefulElement需要保存的信息，其有以下特点：

1. 在对应Widget在构建时可以被同步读取；
2. 在对应Widget的生命周期中，可能会发生改变。开发者需要确保在State发生变化时，调用State.setState通知Framework。Framenwork收到消息后，会重新调用build方法重构Widget Tree，更新UI。
   State生命周期各主要函数如下：

• initState
  当Widget第一次插入到Widget Tree时会被调用，对于每一个State对象，Flutter Framework只会调用一次该回调，所以，通常在该回调中做一些一次性的操作，如状态初始化、订阅子树的事件通知等。
• didChangeDependencies
  当State对象的依赖发生变化时会被调用；其主要场景有两个：

1. 其依赖的InheritedWidget对象发生了变化。
2. 第一次插入Widget Tree中，在initState之后。

• build
  此回调读者现在应该已经相当熟悉了，它主要是用于构建Widget子树的，会在如下场景被调用：

1. 在调用initState之后。
2. 在调用didUpdateWidget之后。
3. 在调用setState之后。
4. 在调用didChangeDependencies之后。
5. 在State对象从树中一个位置移除后（会调用deactivate）又重新插入到树的其它位置之后。

• reassemble
  此回调是专门为了开发调试而提供的，在热重载(hot reload)时会被调用，此回调在Release模式下永远不会被调用。
• didUpdateWidget
  在Widget重新构建时，Flutter Framework会调用Widget.canUpdate来检测Widget Tree中同一位置的新旧节点，然后决定是否需要更新，如果Widget.canUpdate返回true则会调用此回调。
• deactivate
  当State对象从树中被移除时，会调用此回调。在一些场景下，Flutter Framework会将State对象重新插到树中，如包含此State对象的子树在树的一个位置移动到另一个位置时（可以通过GlobalKey来实现）。如果移除后没有重新插入到树中则紧接着会调用dispose方法。
• dispose
  当State对象从树中被永久移除时调用；通常在此回调中释放资源。

State生命周期如下：

7. RenderObjectWidget

RenderObjectWidget为RenderObjectElement提供了配置，是真正负责渲染的Widget。其核心函数如下：

• createRenderObject
  该函数用于创建对应的RenderObject。
• updateRenderObject
  该函数用于根据此Widget的配置更新对应的RenderObject。注意此函数不应该更新RenderObject的子节点。
• didUnmountRenderObject
  该函数用于在RenderObject被从树中移除的时候，清理RenderObject的资源。

8.小结

本文主要介绍了Widget的类型及核心函数，其重点如下：

• Widget的定义是：描述一个UI元素的配置数据。它并不是表示最终绘制在设备上的显示元素，而只是描述显示元素的一个配置数据。
• Widget主要分为三类：Component Widget、Proxy Widget以及Render Widget，其中只有Render Widget才会参与后面的布局（layout）和渲染（paint）流程。
• 一个Widget对象可以对应多个Element对象。

9. 参考文档

1. 深入浅出 Flutter Framework 之 Widget
2. Flutter实战

10. 相关文章

Flutter框架分析（一）–架构总览