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 时，那就得用上 StatefulWidget 了。

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快速上手指南》先导篇

如何找到我？

传送门：CoorChice 的主页

传送门：CoorChice 的 Github

Flutter：界面刷新和生命周期

1. StatelessWidget

2. StatefulWidget

2.1 自定义 StatefulWidget

2.2 State 的生命周期

如何找到我？