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<StatefulWidget> createState() => _FavoriteStatefulWidgetState();
   }
   复制代码

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

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