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<StatefulWidget> createState() {
// TODO: implement createState
return new Page();
}
}
class Page extends State<MinePage>{
@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;在这种情况下，您需要使用有状态窗口小部件来记住项目的状态，以便能够重绘复选框。
- 带有表格的屏幕。该屏幕允许用户填写表单的窗口小部件并将表单发送到服务器。在这种情况下，在这种情况下，除非您在提交表单之前需要验证表单或执行任何其他操作，否则无状态窗口小部件可能就足够了。
网友评论