初略讲解Flutter的Widget、StatelessWidget和StatefulWidget

知识星海
2,562 阅读5分钟

Widget

概念

在前面的章节介绍中，我们知道Flutter中几乎所有的对象都是一个Widget（组件），与原生开发中的“控件”不同的是，Flutter中的Widget的概念更广泛，它不仅可以代表UI元素，也可以代表一些功能性的组件，如：用于手势检测的GestureDetector组件、用于应用主题数据传递的Theme组件等等，而原生开发中的“控件”通常只是指UI元素。在后面的内容中，我们在描述UI元素时，可能会用到“控件”、“组件”这样的概念，读者心里需要知道它们就是Widget，只是针对不同场景所做的不同表述而已。由于Flutter主要就是用于构建用户界面的，所以在大多数时候，读者可以认为Widget就是一个“控件”，不必纠结于概念。

Widget与Element

在Flutter中，Widget的功能是“描述一个UI元素的配置数据”，也就是说，Widget其实并不是表示最终绘制在设备屏幕上的显示元素，而只是显示元素的一个配置数据。实际上，在Flutter中真正代表屏幕上显示元素的类是Element，而Widget只是描述Element的一个配置数据。有关Element的详细介绍将在后续进行，读者现在只需要知道，Widget只是UI元素的一个配置数据，并且一个Widget可以对应多个Element，这是因为同一个Widget对象可以被添加到UI树的不同部分，而真正渲染时，UI树的每一个Element节点都会对应一个Widget对象。

总结一下：

  • Widget实际上就是Element的配置数据，Widget树实际上是一个配置树，而真正的UI渲染树是由Element构成的；但由于Element是通过Widget生成的，所以它们之间又有对应关系，因此在大多数场景中，我们可以宽泛地认为Widget树就是指UI控件树或UI渲染树。
  • 一个Widget对象可以对应多个Element对象。很好理解，根据同一份配置（Widget），可以创建多个实例（Element）。

Widget源码分析

@immutable
abstract class Widget extends DiagnosticableTree {
  const Widget({ this.key });
  final Key key;

  @protected
  Element createElement();

  @override
  String toStringShort() {
    return key == null ? '$runtimeType' : '$runtimeType-$key';
  }

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.defaultDiagnosticsTreeStyle = DiagnosticsTreeStyle.dense;
  }

  static bool canUpdate(Widget oldWidget, Widget newWidget) {
    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
  }
}
  • Widget类继承自DiagnosticableTree，DiagnosticableTree即“诊断树”，主要作用是提供调试信息。
  • Key：这个Key属性类似于React/Vue（两者都是支持响应式编程的Web开发框架）中的Key，主要作用是决定是否在下一次build时复用旧的Widget，决定的条件在canUpdate()方法中。
  • createElement()：正如上述所说“一个Widget可以对应多个Element”；Flutter Framework在构建UI树时，会先调用此方法生成对应节点的Element对象。此方法是Flutter Framework隐式调用的，在我们开发过程中基本不会调用到。
  • debugFillProperties(...)覆写了父类的方法，主要是设置诊断树的一些特性。
  • canUpdate(...)是一个静态方法，它主要用于在Widget树重新build时复用旧的Widget。其实具体来说，应该是：是否用新的Widget对象去更新旧UI树上所对应的Element对象的配置。通过其源码可以看出，只要newWidget与oldWidget的runtimeType和key同时相等时才会用newWidget去更新Element对象的配置，否则就会创建新的Element。

有关Key和Widget复用的细节将在后续进行，读者现在只需要知道，如果为Widget显式添加Key的话可能（但不一定）会使UI在重新构建时变得高效，读者目前可以先忽略此参数。在后面的示例中，我们只在构建列表项UI时会显式指定key。

另外Widget类本身是一个抽象类，其中最核心的就是定义了createElement()方法，在Flutter开发中，我们一般都不用直接继承Widget类来实现Widget，而是会通过继承StatelessWidget和StatefulWidget来间接继承Widget类从而实现Widget，而StatelessWidget和StatefulWidget都是直接继承自Widget类，而这两个类也正是Flutter中非常重要的两个抽象类，它们引入了两种Widget模型，接下来我们将重点介绍一下这两个类。

StatelessWidget

在之前我们有一篇《初略讲解Flutter应用模板源码：计数器示例》的文章，在那里面我们已经简单介绍过StatelessWidget和StatefulWidget，而StatelessWidget相对于StatefulWidget来说比较简单，它继承自Widget，覆写了createElement()方法：

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

StatelessElement间接继承自Element类，与StatelessWidget相对应（StatelessWidget作为StatelessElement的配置数据）。

StatelessWidget用于不需要维护状态的场景，它通常在build方法中通过嵌套其它Widget来构建UI，在构建过程中会以递归的方式构建其嵌套的Widget。举个例子：

class Echo extends StatelessWidget {
  const Echo({
    Key key,  
    @required this.text,
    this.backgroundColor:Colors.grey,
  }):super(key:key);

  final String text;
  final Color backgroundColor;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: backgroundColor,
        child: Text(text),
      ),
    );
  }
}

上面的代码，实现了一个回显字符串的Echo Widget。

按照惯例，Widget的构造函数应使用命名参数，命名参数中的必要参数要添加@required标注，这样有利于静态代码分析器进行检查；另外，在继承Widget时，第一个参数通常应该是Key，但如果Widget需要接收子Widget，那么child或children参数通常应该被放在参数列表的最后；最后，Widget中的属性应尽可能的被声明为final（如：text和backgroundColor），防止被意外改变。

然后我们可以通过如下方式使用它：

Widget build(BuildContext context) {
  return Echo(text: "hello world");
}

StatefulWidget

和StatelessWidget一样，StatefulWidget也是继承自Widget类，并覆写了createElement()方法，不同的是返回的Element对象并不相同；另外StatefulWidget类中添加了一个新的方法createState()，下面我们看看StatefulWidget类的定义：

abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key key }) : super(key: key);

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

  @protected
  State createState();
}
  • StatefulElement间接继承自Element类，与StatefulWidget相对应（StatefulWidget作为StatefulElement的配置数据）。StatefulElement中可能会多次调用createState()来创建State（状态）对象。
  • createState()用于创建和Stateful Widget相关的状态，它在Stateful Widget的生命周期中可能会被多次调用。例如，当一个Stateful Widget同时插入到Widget树的多个位置时，Flutter Framework就会调用该方法为每一个位置生成一个独立的State实例，其实，本质上就是一个StatefulElement对应一个State实例。

在本章中经常会出现“树”的概念，在不同的场景可能指不同的意思，比如在说“Widget树”时它可以指Widget结构树，但由于Widget与Element有对应关系（一可能对多），因此在有些场景（Flutter的SDK文档中）也代指“UI树”的意思。而在Stateful Widget中，State对象也和StatefulElement具有对应关系（一对一），所以在Flutter的SDK文档中，可以经常看到“从树中移除State对象”或“插入State对象到树中”这样的描述。其实，无论哪种描述，其意思都是在描述“一棵构成用户界面的节点元素的树”，因此，在本章以及后续文章当中出现的各种“树”，如果没有特别说明，读者都可抽象的认为它是“一棵构成用户界面的节点元素的树”。

State

一个StatefulWidget类会对应一个State类，State表示与其对应的StatefulWidget要维护的状态，State中保存的状态信息可以：

  1. 在Widget build时可以被同步读取；
  2. 在Widget生命周期中可以被改变；当State被改变时，可以手动调用其setState()方法通知Flutter Framework状态发生改变，Flutter Framework在收到消息后，会重新调用其build方法重新构建Widget树，从而达到更新UI的目的。

State中有两个常用属性：

  1. widget，它表示与该State实例关联的Widget实例，由Flutter Framework动态设置。注意，这种关联并非永久的，因为在应用声明周期中，UI树上的某一个节点的Widget实例在重新构建时可能会变化，但State实例只会在第一次插入到树中时被创建，当在重新构建时，如果Widget被修改了，Flutter Framework会动态设置State.widget为新的Widget实例。
  2. context，它是BuildContext类的一个实例，表示构建Widget的上下文，它是操作Widget在树中位置的一个句柄，它包含了一些查找、遍历当前Widget树中的一些方法；每一个Widget都有一个对应的context对象。

State生命周期

理解State的生命周期对Flutter开发非常重要，为了加深读者印象，下面我们通过一个实例来演示一下State的生命周期。在接下来的示例中，我们实现一个计数器Widget，点击它可以使计数器加1，由于要保存计数器的数值状态，所以需要继承StatefulWidget，代码如下：

class CounterWidget extends StatefulWidget {
  const CounterWidget({
    Key key,
    this.initValue: 0
  });

  final int initValue;

  @override
  _CounterWidgetState createState() => new _CounterWidgetState();
}

CounterWidget接收一个initValue整型参数，它表示计数器的初始值，接下来我们看看State的代码：

class _CounterWidgetState extends State<CounterWidget> {  
  int _counter;

  @override
  void initState() {
    super.initState();
    //初始化状态  
    _counter=widget.initValue;
    print("initState");
  }

  @override
  Widget build(BuildContext context) {
    print("build");
    return Scaffold(
      body: Center(
        child: FlatButton(
          child: Text('$_counter'),
          //点击后计数器自增
          onPressed:()=>setState(()=> ++_counter,
          ),
        ),
      ),
    );
  }

  @override
  void didUpdateWidget(CounterWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    print("didUpdateWidget");
  }

  @override
  void deactivate() {
    super.deactivate();
    print("deactive");
  }

  @override
  void dispose() {
    super.dispose();
    print("dispose");
  }

  @override
  void reassemble() {
    super.reassemble();
    print("reassemble");
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print("didChangeDependencies");
  }
}

接下来，创建一个新路由，在新路由中，我们只显示一个CounterWidget：

Widget build(BuildContext context) {
  return CounterWidget();
}

运行应用并打开该路由页面，在新路由页面打开后，屏幕中央将会显示一个数字0，然后控制台日志输出：

I/flutter ( 5436): initState
I/flutter ( 5436): didChangeDependencies
I/flutter ( 5436): build

可以看到，在StatefulWidget插入到Widget树时，首先会调用initState方法。

然后我们点击⚡️按钮或按“r”键进行热重载，控制台输出日志如下：

I/flutter ( 5436): reassemble
I/flutter ( 5436): didUpdateWidget
I/flutter ( 5436): build

可以看到此时initState和didChangeDependencies都没有被调用，而didUpdateWidget被调用了。

接下来，我们在Widget树中移除CounterWidget，将路由build方法改为：

Widget build(BuildContext context) {
  //移除计数器 
  //return CounterWidget();
  //随便返回一个Text()
  return Text("xxx");
}

然后我们点击⚡️按钮或按“r”键进行热重载，控制台输出日志如下：

I/flutter ( 5436): reassemble
I/flutter ( 5436): deactive
I/flutter ( 5436): dispose

我们可以看到，在CounterWidget从Widget树中移除时，deactive和dispose会依次被调用。

下面我们来看看各个回调函数：

  • initState()：当Widget第一次插入到Widget树时会被调用，对于每一个State对象，Flutter Framework只会调用一次该回调函数，所以通常在该回调函数中做一些一次性的操作，如：状态初始化、订阅子树的事件通知等。不能在该回调函数中调用BuildContext.inheritFromWidgetOfExactType方法（该方法用于在Widget树上获取离当前Widget最近的一个父级InheritFromWidget），原因是在初始化完成后，Widget树中的InheritFromWidget也可能会发生变化，所以正确的做法应该是在build()方法或didChangeDependencies()中调用BuildContext.inheritFromWidgetOfExactType方法。
  • didChangeDependencies()：当State对象的依赖发生变化时会被调用；例如：在之前的build()中包含了一个InheritFromWidget，然后在之后的build()中InheritFromWidget发生了变化，那么此时InheritFromWidget的子Widget的didChangeDependencies()回调函数都会被调用。典型的场景是当系统语言Locale或应用主题改变时，Flutter Framework会通知Widget调用此回调函数。
  • build()：它主要是用于构建Widget子树的，会在如下场景被调用：
    • 在调用initState()之后；
    • 在调用didUpdateWidget()之后；
    • 在调用setState()之后；
    • 在调用didChangeDependencies()之后；
    • 在State对象从树中一个位置移除后（会调用deactivate()）又重新插入到树的其它位置之后。
  • reassemble()：此回调函数是专门为了开发调试而提供的，在热重载（hot reload）时会被调用，此回调函数在Release模式下永远不会被调用。
  • didUpdateWidget()：在Widget重新构建时，Flutter Framework会调用Widget.canUpdate来检测Widget树中同一位置的新旧节点，然后决定是否需要更新，如果Widget.canUpdate返回true则会调用此回调函数。正如之前所述，Widget.canUpdate会在新旧Widget的key和runtimeType同时相等时会返回true，也就是说在新旧Widget的key和runtimeType同时相等时didUpdateWidget()就会被调用。
  • deactivate()：当State对象从树中被移除时，会调用此回调函数；在一些场景下，Flutter Framework会将State对象重新插到树中，如包含此State对象的子树在树的一个位置移动到另一个位置时（可以通过GlobalKey来实现）会调用此回调函数。如果移除后没有重新插入到树中则紧接着会调用dispose()方法。
  • dispose()：当State对象从树中被永久移除时调用；因此通常在此回调函数中进行释放资源等操作。
    StatefulWidgetLifecycle

注意： 在继承StatefulWidget覆写其方法时，对于包含@mustCallSuper标注的父类方法，都要在子类方法中先调用父类方法。

avatar
文章
阅读
粉丝