Widget总结

Flutter中Widget，State和BuildContext的概念是每个Flutter开发人员需要完全理解的最重要概念之一。这里先讲解一下Widget以及Widget。三者之间的关系会在最后一篇总结一下。

Widget详解

Widget类在Flutter中是非常重要的，继承自Widget类的有PreferredSizeWidget、ProxyWidget、RenderObjectWidget、StatefulWidget、StatelessWidget。我们日常使用的绝大部分widget都是继承自Widget类，查看Widget类源码，内部实现非常简单，构造函数如下：

const Widget({ this.key });
final Key key;

在flutter中构建APP是由widget树构建起来的，所以这个key的作用是用来控制在widget树中替换widget的时候使用的。其中Key类是Widget、Element以及SemanticsNode的唯一标识符，继承自Key的还有LocalKey以及GlobalKey。详细可以去framework.dart文件查看相关源码及说明。

Widget分类

在Flutter中，我们平时自定义的widget，一般都是继承自StatefulWidget或StatelessWidget（并不是只有这两种），这两种widget也是目前最常用的两种。如果一个控件自身状态不会去改变，创建了就直接显示，不会有色值、大小或者其他属性的变化，这种widget一般都是继承自StatelessWidget，常见的有Container、ScrollView等。如果一个控件需要动态的去改变或者相应一些状态，例如点击态、色值、内容区域等，那么一般都是继承自StatefulWidget，常见的有CheckBox、AppBar、TabBar等。两者的差别在于是否有状态。

图片1.png

StatelessWidget
一个StatelessWidget可以用多个不同的BuildContext构建，它是由build函数构建的。BuildContext抽象类，它表示一个控件在整个控件树中的位置句柄，每个控件都有自己的BuildContext实例。某些静态函数（例如showDialog、Theme.of等）也有BuildContext实例，以便它们可以代表调用控件或专门针对给定上下文获取数据。BuildContext对象被传递给WidgetBuilder函数，它为创建控件的函数签名，例如StatelessWidget.build或State.build。无状态窗口小部件只能在加载/构建窗口小部件时绘制一次，这意味着无法基于任何事件或用户操作重绘窗口小部件。

图片2.png

对于StatelessWidget，build方法会在如下三种情况下调用：

widget第一次被插入到树中；
widget的父节点更改了配置（configuration）；
widget依赖的InheritedWidget（InheritedWidget是一个特殊的Widget，您可以将其作为另一个子树的父级放在Widgets树中。该子树的所有小部件都必须能够与该InheritedWidget公开的数据进行交互，后面会详细总结）改变了。

import 'package:flutter/material.dart';
import 'package:flutter_apptest/SplashPage.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {

  MyApp ({
        Key key,
        this.parameter,
    }): super(key:key);
  final parameter;

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SplashPage(),//启动MainPage
    );
  }
}

StatefulWidget
其他一些小部件将处理一些在Widget生命周期内会发生变化的内部数据。因此，该数据变得动态。
此Widget保存的数据集可能会在此Widget的生命周期内发生变化，称为State。
这些窗口小部件称为有状态窗口小部件(Stateful Widget)。
这样的Widget的示例可以是用户可以选择的复选框列表或者根据条件禁用的Button。
StatefulWidget创建需要一个State状态，通过createState函数返回。而一个StatefulWidget会为每个BuildContext创建一个State对象。

图片3.png

在了解这些状态的时候，更多的是了解State状态

import 'package:flutter/material.dart';

class MinePage extends StatefulWidget{

  //此部分在Widget的生命周期内不会发生变化，但可能接受可由其相应的State实例使用的参数。请注意，在Widget的第一部分定义的任何变量通常在其生命周期内不会更改。
  MyStatefulWidget({
        Key key,
        this.color,
    }): super(key: key);
    
    final Color color;

  @override
  State createState() {
    // TODO: implement createState
    return new Page();
  }

}

class Page extends State{

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return layout(context);
  }

  Widget layout(BuildContext context) {
    // 改变状态加以重新绘制
    setState(() {

    });
    return new Scaffold(
      appBar: buildAppBar(context),
      body: new Text('我的页面'),
    );
  }

  buildAppBar(BuildContext context) {
    return new AppBar(title: const Text('我的'),);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  }
  
}

我们在创建State的时候可以看到和StatefulWidget相似的build方法，也就是说我们也可以获得一个BuildContext，在使用StatefulWidget.createState创建它们之前以及在调用initState之前，框架将State对象与BuildContext关联起来，该关联是永久的：State对象永远不会改变它的BuildContext（但是BuildContext本身可以在控件树中移动）。后面讲解一下这个BuildContext对象在整个程序中什么角色

State

State的作用有两点：

在widget构建的时候可以被同步读取；
在widget的生命周期中可能会被改变。

State的生命周期有四种状态：

created：当State对象被创建时候，State.initState方法会被调用；
initialized：当State对象被创建，但还没有准备构建时，State.didChangeDependencies在这个时候会被调用；
ready：State对象已经准备好了构建，State.dispose没有被调用的时候；
defunct：State.dispose被调用后，State对象不能够被构建。

图片4.png

完整生命周期如下：

创建一个State对象时，会调用StatefulWidget.createState；
和一个BuildContext相关联，可以认为被加载了（mounted）；
调用initState；
调用didChangeDependencies；
经过上述步骤，State对象被完全的初始化了，调用build；
如果有需要，会调用didUpdateWidget；
如果处在开发模式，热加载会调用reassemble；
如果它的子树（subtree）包含需要被移除的State对象，会调用deactivate；
调用dispose,State对象以后都不会被构建；
当调用了dispose,State对象处于未加载（unmounted），已经被dispose的State 对象没有办法被重新加载（remount）。

当控件的配置被更改时会调用State.didUpdateWidget方法，此时框架会重新绘制控件。你也可以使用State.setState方法在状态发生变化时通知框架，告诉框架该对象的内部状态已经改变，框架接到通知后也会重新绘制控件。

State常用方法

initState()
initState（）方法是创建State对象后要调用的第一个方法（在构造函数之后）。
需要执行其他初始化时，将覆盖重写此方法。典型的初始化与动画，控制器有关…
如果重写此方法，则需要在第一个位置调用super.initState（）方法。
在这个方法中，上下文context可用，但你还不能真正使用它，因为框架还没有完全将状态与它相关联。
initState（）方法完成后，State对象现在已初始化，上下文可用。在此State对象的生命周期内不再调用此方法。
didChangeDependencies()
didChangeDependencies()方法是要调用的第二个方法。
在此阶段，由于上下文可用，您可以使用它。
如果您的Widget链接到InheritedWidget和/或您需要初始化一些侦听器（基于BuildContext），则通常会覆盖此方法。请注意，如果您的窗口小部件链接到InheritedWidget，则每次重建此窗口小部件时都会调用此方法。
build()
build(BuildContext context)方法在didChangeDependencies()（和didUpdateWidget）之后调用。
这是您构建窗口小部件（可能还有任何子树）的位置。
每次State对象更改时（或者当InheritedWidget需要通知“已注册”的小部件时）都会调用此方法！
为了强制重建，您可以调用setState((){...})方法。
dispose()
放弃窗口小部件时调用dispose（）方法。
如果你需要执行一些清理（例如监听器，控制器…），然后立即调用super.dispose（），则覆盖此方法。

State.setState

State中比较重要的一个方法是setState，当修改状态时，widget会被更新。比方说点击CheckBox，会出现选中和非选中状态之间的切换，就是通过修改状态来达到的。查看setState源码，在一些异常的情况下将会抛出异常：

传入的为null；
处在defunct阶段；
created阶段还没有被加载（mounted）；
参数返回一个Future对象。
检查完一系列异常后，最后调用代码如下：

_element.markNeedsBuild();

markNeedsBuild内部，则是通过标记element为diry，在下一帧的时候重建（rebuild）。可以看出setState并不是立即生效，它只是将widget进行了标记，真正的rebuild操作，则是等到下一帧的时候才会去进行。

StatefulWidget的两个主要类别：

在initState中创建资源，在dispose中销毁，但是不依赖于InheritedWidget或者调用setState方法，这类widget基本上用在一个应用或者页面的root；
使用setState或者依赖于InheritedWidget，这种在营业生命周期中会被重建（rebuild）很多次。
总结一句话就是在每一帧的绘制过程，StatefulWidget会根据State或者配置变了来rebuild下一帧，也就是上面图所说的弄脏了和下一帧又干净了。

选择无状态还是有状态小部件？

在我的小部件的生命周期中，我是否需要考虑一个将要更改的变量，何时更改，将强制重建小部件？
如果问题的答案是肯定的，那么您需要一个有状态的小部件，否则，您需要一个无状态小部件。
比如：

用于显示复选框列表的小组件。要显示复选框，您需要考虑一系列项目。每个项目都是一个具有标题和状态的对象。如果单击复选框，则切换相应的item.status;在这种情况下，您需要使用有状态窗口小部件来记住项目的状态，以便能够重绘复选框。
带有表格的屏幕。该屏幕允许用户填写表单的窗口小部件并将表单发送到服务器。在这种情况下，在这种情况下，除非您在提交表单之前需要验证表单或执行任何其他操作，否则无状态窗口小部件可能就足够了。