Flutter学习之四 StatelessWidget 和 St
物类之起，必有所始。荣辱之来，必象其德。
前言
前面一章简单的介绍了Widget类，这一章主要介绍一下StatelessWidget和StatefulWidget，两者都是继承Widget。
正文
- StatelessWidget
StatelessWidget相对比较简单，用于不需要维护状态的场景（初始化后不需要改变UI），它通常在build方法中通过嵌套其它 widget来构建UI，在构建过程中会递归的构建其嵌套的 widget 。其类的定义如下：
abstract class StatelessWidget extends Widget {
const StatelessWidget({ Key? key }) : super(key: key);
/// Creates a [StatelessElement] to manage this widget's location in the tree.
///
/// It is uncommon for subclasses to override this method.
@override
StatelessElement createElement() => StatelessElement(this);
@protected
Widget build(BuildContext context);
}
重写了createElement()方法，StatelessElement间接继承自Element类，与StatelessWidget相对应（作为其配置数据）。
举个栗子：
class StatelessPage extends StatelessWidget {
const StatelessPage({
Key? key,
required this.content,
required this.backgroudColor,
}) : super(key: key);
final String content;
final Color backgroudColor;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(content),
),
body: Center(
child: Container(
height: 50,
alignment: Alignment.center,
color: backgroudColor,
child: Text(content),
),
),
);
}
}
这是一个简单的页面，有2个必传的构造属性（content、backgroudColor），导航title是传进来的content。页面的中间有个组件，组件是个高50，子控件居中，背景颜色是传进来的颜色，子组件是Text，内容是传进来的content。
注意：构造参数要用
final修饰，前面说过flutter刷新机制，属性变了，这个Widget就不是本身的了。另外的，如果是必传的要加required，可选的用？修饰即可。
构造方法
StatelessPage(content: '我的StatelessWidget', backgroudColor: Colors.yellow)
效果如图1：
1.png
- StatefulWidget
和StatelessWidget相比，StatefulWidget添加了一个新的接口createState()。其类定义如下：
abstract class StatefulWidget extends Widget {
const StatefulWidget({ Key key }) : super(key: key);
@override
StatefulElement createElement() => StatefulElement(this);
@protected
State createState();
}
-
StatefulElement间接继承自Element类，与StatefulWidget相对应（作为其配置数据）。StatefulElement中可能会多次调用createState()来创建状态（State）对象。 -
createState()用于创建和StatefulWidget相关的状态，它在StatefulWidget的生命周期中可能会被多次调用。例如，当一个StatefulWidget同时插入到widget树的多个位置时，Flutter 框架就会调用该方法为每一个位置生成一个独立的State实例，其实，本质上就是一个StatefulElement对应一个State实例。
不好理解可以跳过，写段时间再回头看。下面详细介绍一下State。
一个StatefulWidget 类会对应一个 State类，State表示与其对应的 StatefulWidget要维护的状态，State中的保存的状态信息可以：
- 在
Widget构建时可以被同步读取。 - 在
Widget生命周期中可以被改变，当State被改变时，可以手动调用其setState()方法通知Flutter 框架状态发生改变，Flutter 框架在收到消息后，会重新调用其build方法重新构建 widget 树，从而达到更新UI的目的。
State 中有两个常用属性：
-
widget，它表示与该 State 实例关联的 widget 实例，由Flutter 框架动态设置。注意，这种关联并非永久的，因为在应用生命周期中，UI树上的某一个节点的 widget 实例在重新构建时可能会变化，但State实例只会在第一次插入到树中时被创建，当在重新构建时，如果 widget 被修改了，Flutter 框架会动态设置State. widget 为新的 widget 实例。 -
context。StatefulWidget对应的BuildContext，作用同StatelessWidget的BuildContext。
state生命周期：
理解State的生命周期对flutter开发非常重要，如果想看详细的请参见 state生命周期，我这里对生命周期主要方法总结一下：
-
1、
initState()：当 widget 第一次插入到 widget 树时会被调用，对于每一个State对象，Flutter 框架只会调用一次该回调。 -
2、
didChangeDependencies()：当State对象的依赖发生变化时会被调用； -
3、
build()：主要是用于构建 widget 子树的，会在如下场景被调用：
1、在调用
initState()之后。
2、在调用didUpdateWidget()之后。
3、在调用setState()之后。
4、在调用didChangeDependencies()之后。
5、在State对象从树中一个位置移除后（会调用deactivate）又重新插入到树的其它位置之后。
- 4、
reassemble()：此回调是专门为了开发调试而提供的，在热重载(hot reload)时会被调用，此回调在Release模式下永远不会被调用。 - 5、
didUpdateWidget ()：在新旧 widget 的key和runtimeType同时相等时didUpdateWidget()就会被调用。 - 6、
deactivate()：当 State 对象从树中被移除时，会调用此回调； - 7、
dispose()：当 State 对象从树中被永久移除时调用；通常在此回调中释放资源；
StatefulWidget 生命周期图2
2.png
小结
前期开发记住几点就行了：
1、先走initState()，后走build()；
2、所有的UI构建要放在build()里面；
3、刷新UI直接调用setState()；
4、回收垃圾在dispose()。
总结
- Q：什么时候使用
StatelessWidget和StatefulWidget？
A：如果一个UI在初始化之后就不用更新，那就使用StatelessWidget，反之StatefulWidget。- Q：既然都是Widget，啥是VC，啥是view？
A：StatelessWidget、StatefulWidget的build方法里面，如果第一子节点是Scaffold（带有appBar、body、bottomNavigationBar这种的），那就可以理解为这个页面是VC，反之可以理解为view。- Q：iOS中的self在Flutter中是啥？
A：首字母小写的widget。
