Flutter：界面刷新和生命周期

目录传送门：《Flutter快速上手指南》先导篇

在 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：

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

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

2. 实现一个 State，它提供了真正的 Widget 视图和交互逻辑。

   class _FavoriteStatefulWidgetState extends State {
     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'),
               ),
             ),
           ],
         );
   }
   复制代码

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

上图就是 State 的生命周期图。

1. StatefulWidget.createState()

   Framework 调用会通过调用 StatefulWidget.createState() 来创建一个 State。

2. initState()

   新创建的 State 会和一个 BuildContext 产生关联，此时认为 State 已经被安装好了，initState() 函数将会被调用。

   通常，我们可以重写这个函数，进行初始化操作。

3. didChangeDependencies()

   在 initState() 调用结束后，这个函数会被调用。

   事实上，当 State 对象的依赖关系发生变化时，这个函数总会被 Framework 调用。

4. build()

   经过以上步骤，系统认为一个 State 已经准备好了，就会调用 build() 来构建视图。

   我们需要在这个函数中，返回一个 Widget。

5. deactivate()

   当 State 被暂时从视图树中移除时，会调用这个函数。

   页面切换时，也会调用它，因为此时 State 在视图树中的位置发生了变化，需要先暂时移除后添加。

   ⚠️注意，重写的时候必须要调用 super.deactivate()。

6. dispose()

   当 State 被永久的从视图树中移除，Framework 会调用该函数。

   在销毁前触发，我们可以在这里进行最终的资源释放。

   在调用这个函数之前，总会先调用 deactivate()。

   ⚠️注意，重写的时候必须要调用 super.dispose()。

7. didUpdateWidget(covariant T oldWidget)

   当 widget 的配置发生变化时，会调用这个函数。

   比如，Hot-reload 的时候就会调用这个函数。

   这个函数调用后，会调用 build()。

8. setState()

   当我需要更新 State 的视图时，需要手动调用这个函数，它会触发 build() 。

目录传送门：《Flutter快速上手指南》先导篇

如何找到我？

传送门：CoorChice 的主页

传送门：CoorChice 的 Github

转载于:https://juejin.im/post/5ca81c80e51d4509f8232e9b