在 Flutter 中，有两类常用的 Widget：
- 无状态的 StatelessWidget
- 有状态的 StatefulWidget
在开发过程中，我们经常需要继承它们两来实现自己的 Widget。
1. StatelessWidget
一个 StatelessWidget 是不能被改变的，比如：Icon、Text等。
如果你的控件一旦显示，就不需要再做任何的变更，那么你应该使用 StatelessWidget。
实现一个自己的 StatelessWidget 很简单。
当你看到下面这个例子?时，你就知道它有多简单了。
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return _buildMyWidget(context);
}
看，只要在 build() 中返回你的视图就可以了。
2. StatefulWidget
一个 StatefulWidget 是有状态的，可变的。
它可以改变自己的外观，以响应用户的操作或者数据的变化。
比如：CheckBox、Switch..
我们之所以能够改变一个 StatefulWidget，是因为它有一个设置状态的函数：
setState((){
// 更新状态、数据
})
调用这个函数后，就会触发 StatefulWidget 的视图树重建。
因此，当我们需要一个可交互的，即能根据用户操作或数据变化而改变视图的 Widget 时，那就得用上 StatelessWidget 了。
2.1 自定义 StatefulWidget
现在，来创建一个自定义的 StatefulWidget：
2.1.1.实现一个 StatefulWidget，它是 Widget 的外层。
class FavoriteStatefulWidget extends StatefulWidget {
// 必须重写 createState()，返回一个 State，它包含了视图和交互逻辑
@override
State<StatefulWidget> createState() => _FavoriteStatefulWidgetState();
}
2.1.2.实现一个 State，它提供了真正的 Widget 视图和交互逻辑。
class _FavoriteStatefulWidgetState extends State<FavoriteStatefulWidget> {
bool _isFavorited = true;
int _favoriteCount = 41;
void _toggleFavorite() {
// 通过 setState() 更新数据
// 组件树就会自动刷新了
setState(() {
if (_isFavorited) {
_favoriteCount -= 1;
_isFavorited = false;
} else {
_favoriteCount += 1;
_isFavorited = true;
}
});
}
// 重写 build() 函数，构建视图树
@override
Widget build(BuildContext context) => Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: EdgeInsets.all(0),
child: IconButton(
icon: (_isFavorited ? Icon(Icons.star) : Icon(Icons.star_border)),
color: Colors.red[500],
onPressed: _toggleFavorite,
),
),
SizedBox(
width: 18,
child: Container(
child: Text('$_favoriteCount'),
),
),
],
);
}
2.1.3.使用这个自定义的 StatefulWidget 看看效果。
main() => runApp(MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Container(
color: Colors.white,
child: Center(
child: FavoriteStatefulWidget(),
),
),
),
));
2.2 State 的生命周期
从上面的例子中可以看到，StatefulWidget 会要求提供一个含有视图树的 State。
既然 State 能够控制一个视图的状态，那它肯定会有一系列的生命周期。
StatefulWidget.createState()
Framework 调用会通过调用 StatefulWidget.createState() 来创建一个 State。
initState()
新创建的 State 会和一个 BuildContext 产生关联，此时认为 State 已经被安装好了，initState() 函数将会被调用。
通常，我们可以重写这个函数，进行初始化操作。
didChangeDependencies()
在 initState() 调用结束后，这个函数会被调用。
事实上，当 State 对象的依赖关系发生变化时，这个函数总会被 Framework 调用。
build()
经过以上步骤，系统认为一个 State 已经准备好了，就会调用 build() 来构建视图。
我们需要在这个函数中，返回一个 Widget。
deactivate()
当 State 被暂时从视图树中移除时，会调用这个函数。
页面切换时，也会调用它，因为此时 State 在视图树中的位置发生了变化，需要先暂时移除后添加。
⚠️注意，重写的时候必须要调用 super.deactivate()。
dispose()
当 State 被永久的从视图树中移除，Framework 会调用该函数。
在销毁前触发，我们可以在这里进行最终的资源释放。
在调用这个函数之前，总会先调用 deactivate()。
⚠️注意，重写的时候必须要调用 super.dispose()。
didUpdateWidget(covariant T oldWidget)
当 widget 的配置发生变化时，会调用这个函数。
比如，Hot-reload 的时候就会调用这个函数。
这个函数调用后，会调用 build()。
setState()
当我需要更新 State 的视图时，需要手动调用这个函数，它会触发 build() 。
网友评论