阅读 365

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分类

image.png 如上图所示,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的介绍,以及WidgetElement的关系我们将在后面深入介绍。现在需要记住以下两点:

  • WidgetElement的配置数据,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 TreeElement Tree如下:

image.png 在上面示例中,左边是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的核心方法之一,主要用于向用户提供描绘用户界面的接口。用户通过此函数组合用户需要的子WidgetFramework则通过调用该方法,将用户定义的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,用户通过该方法创建其需要保存数据的StateFramework在一个StatefulWidget的生命周期内,可能会多次调用该函数。例如,假如一个StatefulWidget被加入Widget Tree多个位置,Framework将为每个位置创建一个单独的State.

6. State

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

  1. 在对应Widget在构建时可以被同步读取;
  2. 在对应Widget的生命周期中,可能会发生改变。开发者需要确保在State发生变化时,调用State.setState通知FrameworkFramenwork收到消息后,会重新调用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生命周期如下: image.png

7. RenderObjectWidget

RenderObjectWidgetRenderObjectElement提供了配置,是真正负责渲染的Widget。其核心函数如下:

  • createRenderObject

该函数用于创建对应的RenderObject

  • updateRenderObject

该函数用于根据此Widget的配置更新对应的RenderObject。注意此函数不应该更新RenderObject的子节点。

  • didUnmountRenderObject

该函数用于在RenderObject被从树中移除的时候,清理RenderObject的资源。

8.小结

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

  • Widget的定义是:描述一个UI元素的配置数据。它并不是表示最终绘制在设备上的显示元素,而只是描述显示元素的一个配置数据。
  • Widget主要分为三类:Component WidgetProxy 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

文章分类
前端
文章标签