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：

实现一个 StatefulWidget，它是 Widget 的外层。

class FavoriteStatefulWidget extends StatefulWidget {   // 必须重写 createState()，返回一个 State，它包含了视图和交互逻辑  @override  State<StatefulWidget> createState() => _FavoriteStatefulWidgetState();}复制代码

实现一个 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'),            ),          ),        ],      );}复制代码

使用这个自定义的 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 能够控制一个视图的状态，那它肯定会有一系列的生命周期。

上图就是 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() 。

flutter 页面的生命周期（转）

flutter 页面的生命周期（转）

1. StatelessWidget

2. StatefulWidget

2.1 自定义 StatefulWidget

2.2 State 的生命周期