一. 为什么需要状态管理？

1.1. 状态管理

Flutter作为一个现代的框架，是声明式编程的。

1.2. 不同状态管理分类

1.2.1. 短时状态Ephemeral state

这种状态只需要在自己的Widget中使用即可

  • 比如我们之前做的简单计数器counter
  • 比如一个PageView组件记录当前的页面
  • 比如一个动画记录当前的进度
  • 比如一个BottomNavigationBar中当前被选中的tab

这种状态只需要使用StatefulWidget对应的State类管理即可，其它部分并不需要访问这个状态。

1.2.2. 应用状态App state

开发中也有非常多的状态需要在多个部分进行共享

  • 比如用户一个个性化选项
  • 比如用户的登录状态信息
  • 比如一个电商应用的购物车
  • 比如一个新闻应用的已读消息或者未读消息

这种状态如果在Widget之间传递来、传递去，那么是无穷尽的，并且代码的耦合度会变得非常高，无论是代码编写质量、后期维护、可扩展性都非常差。可以选择全局状态管理的方式，来对状态进行统一的管理和应用。

1.2.3. 如何选择不同的管理方式

开发中，没有明确的规则去区分哪些状态是短时状态，哪些状态是应用状态。

  • 某些短时状态可能在之后的开发维护中需要升级为应用状态；

The rule of thumb is: Do whatever is less awkward.

二. 共享状态管理

2.1. InheritedWidget

InheritedWidget和React中的context功能类似，可以实现跨组件数据的传递。
定义一个共享数据的InheritedWidget，需要继承自InheritedWidget

  • 这里定义了一个of方法，该方法通过context开始去查找祖先的WLDataWidget

  • updateShouldNotify方法是对比新旧WLDataWidget，是否需要对更新相关依赖的Widget

    1. class WLDataWidget extends InheritedWidget {
    2. finalint counter;
    4. WLDataWidget({this.counter, Widget child}): super(child: child);
    6. static WLDataWidget of(BuildContext context) {
    7.   return context.dependOnInheritedWidgetOfExactType();
    8. }
    10. @override
    11. bool updateShouldNotify(WLDataWidget oldWidget) {
    12.   returnthis.counter != oldWidget.counter;
    13. }
    14. }

    创建WLDataWidget，并且传入数据（这里点击按钮会修改数据，并且重新build） ```dart class HYHomePage extends StatefulWidget { @override _HYHomePageState createState() => _HYHomePageState(); }

class _HYHomePageState extends State { int data = 100;

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(“InheritedWidget”), ), body: HYDataWidget( counter: data, child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ HYShowData() ], ), ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () { setState(() { data++; }); }, ), ); } }

  1. 在某个Widget中使用共享的数据，并且监听
  2. <a name="MkrTj"></a>
  3. ### 2.2. Provider
  4. Provider是目前官方推荐的全局状态管理工具，由社区作者Remi Rousselet 和 Flutter Team共同编写。<br />dependencies:<br />  provider:^4.0.4
  5. <a name="h88A0"></a>
  6. #### 2.2.1. Provider的基本使用
  7. 使用Provider，主要关心三个概念：
  9. - ChangeNotifier：真正数据（状态）存放的地方
  10. - ChangeNotifierProvider：Widget树中提供数据（状态）的地方，会在其中创建对应的ChangeNotifier
  11. - Consumer：Widget树中需要使用数据（状态）的地方
  13. 计数器案例使用Provider来实现：<br />**第一步：创建自己的ChangeNotifier**<br />需要一个ChangeNotifier来保存我们的状态：
  15. - 可以使用继承自ChangeNotifier，也可以使用混入，这取决于是否需要继承自其它的类
  16. - 使用一个私有的_counter，并且提供了getter和setter
  17. - 在setter中我们监听到_counter的改变，就调用notifyListeners方法，通知所有的Consumer进行更新
  18. ```dart
  19. class CounterProvider extends ChangeNotifier {
  20.   int _counter = 100;
  21.   intget counter {
  22.     return _counter;
  23.   }
  24.   set counter(int value) {
  25.     _counter = value;
  26.     notifyListeners();
  27.   }
  28. }

第二步：在Widget Tree中插入ChangeNotifierProvider
需要在Widget Tree中插入ChangeNotifierProvider，以便Consumer可以获取到数据：

  • 将ChangeNotifierProvider放到了顶层，这样方便在整个应用的任何地方可以使用CounterProvider

    1. void main() {
    2. runApp(ChangeNotifierProvider(
    3.   create: (context) => CounterProvider(),
    4.   child: MyApp(),
    5. ));
    6. }

    第三步：在首页中使用Consumer引入和修改状态

  • 引入位置一：在body中使用Consumer，Consumer需要传入一个builder回调函数，当数据发生变化时，就会通知依赖数据的Consumer重新调用builder方法来构建；

  • 引入位置二：在floatingActionButton中使用Consumer，当点击按钮时，修改CounterNotifier中的counter数据；

    1. class WLHomePage extends StatelessWidget {
    2. @override
    3. Widget build(BuildContext context) {
    4.   return Scaffold(
    5.     appBar: AppBar(
    6.       title: Text("列表测试"),
    7.     ),
    8.     body: Center(
    9.       child: Consumer<CounterProvider>(
    10.         builder: (ctx, counterPro, child) {
    11.           return Text("当前计数:${counterPro.counter}", style: TextStyle(fontSize: 20, color: Colors.red),);
    12.         }
    13.       ),
    14.     ),
    15.     floatingActionButton: Consumer<CounterProvider>(
    16.       builder: (ctx, counterPro, child) {
    17.         return FloatingActionButton(
    18.           child: child,
    19.           onPressed: () {
    20.             counterPro.counter += 1;
    21.           },
    22.         );
    23.       },
    24.       child: Icon(Icons.add),
    25.     ),
    26.   );
    27. }
    28. }

    Consumer的builder方法解析：

  • 参数一：context，每个build方法都会有上下文，目的是知道当前树的位置

  • 参数二：ChangeNotifier对应的实例，也是我们在builder函数中主要使用的对象
  • 参数三：child，目的是进行优化，如果builder下面有一颗庞大的子树，当模型发生改变的时候，我们并不希望重新build这颗子树，那么就可以将这颗子树放到Consumer的child中，在这里直接引入即可

步骤四：创建一个新的页面，在新的页面中修改数据

  1. class SecondPage extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return Scaffold(
  5.       appBar: AppBar(
  6.         title: Text("第二个页面"),
  7.       ),
  8.       floatingActionButton: Consumer<CounterProvider>(
  9.         builder: (ctx, counterPro, child) {
  10.           return FloatingActionButton(
  11.             child: child,
  12.             onPressed: () {
  13.               counterPro.counter += 1;
  14.             },
  15.           );
  16.         },
  17.         child: Icon(Icons.add),
  18.       ),
  19.     );
  20.   }
  21. }

2.2.2. Provider.of的弊端

事实上，Provider是基于InheritedWidget，所以在使用ChangeNotifier中的数据时，可以通过Provider.of的方式来使用：

  1. Text("当前计数:${Provider.of<CounterProvider>(context).counter}",
  2.   style: TextStyle(fontSize: 30, color: Colors.purple),
  3. ),

很明显上面的代码会更加简洁，开发中是否要选择上面这种方式呢？

  • 答案是否定的，更多时候还是要选择Consumer的方式

为什么呢？因为Consumer在刷新整个Widget树时，会尽可能少的rebuild Widget。
方式一：Provider.of的方式完整的代码：

  • 当点击了floatingActionButton时，WLHomePage的build方法会被重新调用。
  • 这意味着整个WLHomePage的Widget都需要重新build

方式二：将Text中的内容采用Consumer的方式修改如下：

  • 你会发现WLHomePage的build方法不会被重新调用；

  • 如果有对应的child widget，可以采用上面案例中的方式来组织，性能更高；

    1. Consumer<CounterProvider>(builder: (ctx, counterPro, child) {
    2. print("调用Consumer的builder");
    3. return Text(
    4.   "当前计数:${counterPro.counter}",
    5.   style: TextStyle(fontSize: 30, color: Colors.red),
    6. );
    7. }),

    2.2.3. Selector的选择

    Consumer是否是最好的选择呢？并不是，它也会存在弊端

  • 比如当点击了floatingActionButton时，在代码的两处分别打印它们的builder是否会重新调用；

  • 会发现只要点击了floatingActionButton，两个位置都会被重新builder；
  • 但是floatingActionButton的位置有重新build的必要吗？没有，因为它是否在操作数据，并没有展示；

  • 如何可以做到让它不要重新build了？使用Selector来代替Consumer

    1. floatingActionButton: Selector<CounterProvider, CounterProvider>(
    2. selector: (ctx, provider) => provider,
    3. shouldRebuild: (pre, next) => false,
    4. builder: (ctx, counterPro, child) {
    5.   print("floatingActionButton展示的位置builder被调用");
    6.   return FloatingActionButton(
    7.     child: child,
    8.     onPressed: () {
    9.       counterPro.counter += 1;
    10.     },
    11.   );
    12. },
    13. child: Icon(Icons.add),
    14. ),

    Selector和Consumer对比，不同之处主要是三个关键点：

  • 关键点1：泛型参数是两个

    • 泛型参数一：这次要使用的Provider
    • 泛型参数二：转换之后的数据类型，比如我这里转换之后依然是使用CounterProvider，那么他们两个就是一样的类型
  • 关键点2：selector回调函数
    • 转换的回调函数，希望如何进行转换
    • S Function(BuildContext, A) selector
    • 这里没有进行转换，所以直接将A实例返回即可
  • 关键点3：是否希望重新rebuild
    • 这里也是一个回调函数，我们可以拿到转换前后的两个实例；
    • bool Function(T previous, T next);
    • 因为这里不希望它重新rebuild，无论数据如何变化，所以这里直接return false；

这个时候，重新测试点击floatingActionButton，floatingActionButton中的代码并不会进行rebuild操作。
所以某些情况下，可以使用Selector来代替Consumer，性能会更高。

2.2.4. MultiProvider

在开发中，需要共享的数据肯定不止一个，并且数据需要组织到一起，一个Provider必然是不够的。
增加一个新的ChangeNotifier

  1. import'package:flutter/material.dart';
  3. class UserInfo {
  4.   String nickname;
  5.   int level;
  7.   UserInfo(this.nickname, this.level);
  8. }
  10. class UserProvider extends ChangeNotifier {
  11.   UserInfo _userInfo = UserInfo("why", 18);
  13.   set userInfo(UserInfo info) {
  14.     _userInfo = info;
  15.     notifyListeners();
  16.   }
  18.   get userInfo {
  19.     return _userInfo;
  20.   }
  21. }

有多个Provider需要提供应该怎么做呢？
方式一：多个Provider之间嵌套

  • 弊端，如果嵌套层级过多不方便维护，扩展性也比较差

方式二：使用MultiProvider

  1. runApp(MultiProvider(
  2.   providers: [
  3.     ChangeNotifierProvider(create: (ctx) => CounterProvider()),
  4.     ChangeNotifierProvider(create: (ctx) => UserProvider()),
  5.   ],
  6.   child: MyApp(),
  7. ));