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框架分析（一）--架构总览
Flutter框架分析（三）-- Element
Flutter框架分析（四）-RenderObject
Flutter框架分析（五）-Widget，Element，RenderObject树
Flutter框架分析（六）-Constraint
Flutter框架分析（七）-relayoutBoundary
Flutter框架分析（八）-Platform Channel
Flutter框架分析- Parent Data
Flutter框架分析 -InheritedWidget