初略讲解Flutter的基础Widgets之Widget、StatelessWidget和StatefulWidget

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的child参数，那么一般应该将它放在参数列表的最后；最后，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对象从树中被永久移除时调用；所以一般在此回调函数中进行释放资源等操做。

  

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