在Flutter开发中，状态管理是一个永恒的话题。一般的原则是：

  • 如果状态是组件私有的，则应该由组件自己管理；
  • 如果状态要跨组件共享，则该状态应该由各个组件共同的父元素来管理。

对于组件私有的状态管理很好理解，但对于跨组件共享的状态，管理的方式就比较多了，如
使用 全局事件总线EventBus (将在下一章中介绍)，它是一个 观察者模式 的实现，通过它就可以实现跨组件状态同步：

  • 状态持有方（发布者）负责更新、发布状态
  • 状态使用方（观察者）监听状态改变事件来执行一些操作

下面我们看一个登陆状态同步的简单示例：
定义事件：

  1. enum Event{
  2.   login,
  3.   ... //省略其它事件
  4. }

登录页代码大致如下：

  1. // 登录状态改变后发布状态改变事件
  2. bus.emit(Event.login);

依赖登录状态的页面：

  1. void onLoginChanged(e){
  2.   //登录状态变化处理逻辑
  3. }
  5. @override
  6. void initState() {
  7.   //订阅登录状态改变事件
  8.   bus.on(Event.login,onLogin);
  9.   super.initState();
  10. }
  12. @override
  13. void dispose() {
  14.   //取消订阅
  15.   bus.off(Event.login,onLogin);
  16.   super.dispose();
  17. }

我们可以发现，通过观察者模式来实现跨组件状态共享有一些明显的缺点：

  1. 必须显式定义各种事件，不好管理
  2. 订阅者必须需显式注册状态改变回调，也必须在组件销毁时手动去解绑回调以避免内存泄露。

在Flutter当中有没有更好的跨组件状态管理方式了呢？答案是肯定的，那怎么做的？
我们想想前面介绍的InheritedWidget，它的天生特性就是能绑定InheritedWidget与依赖它的子孙组件的依赖关系，并且当InheritedWidget数据发生变化时，可以自动更新依赖的子孙组件！利用这个特性，我们可以将需要跨组件共享的状态保存在InheritedWidget中，然后在子组件中引用InheritedWidget即可，Flutter社区著名的Provider包正是基于这个思想实现的一套跨组件状态共享解决方案，接下来我们便详细介绍一下Provider的用法及原理。

Provider

为了加强读者的理解，我们不直接去看 Provider 包的源代码，相反，我会带着你根据上面描述的通过InheritedWidget 实现的思路来一步一步地实现一个最小功能的Provider

1、建立一个保存的共享数据类

首先，我们需要一个保存需要共享的数据类 InheritedWidget
由于具体业务数据类型不可预期，为了通用性，我们使用泛型，定义一个继承 InheritedWidget的通用类：

  1. // 一个通用的InheritedWidget，保存任需要跨组件共享的状态
  2. class InheritedProvider<T> extends InheritedWidget {
  3.   InheritedProvider({@required this.data, Widget child}) : super(child: child);
  4.   //共享状态使用泛型
  5.   final T data;
  6.   @override
  7.   bool updateShouldNotify(InheritedProvider<T> old) {
  8.     //在此简单返回true，则每次更新都会调用依赖其的子孙节点的`didChangeDependencies`。
  9.     return true;
  10.   }
  11. }

数据保存的地方有了，那么接下来我们需要做的就是在数据发生变化的时候来重新构建 InheritedWidget，那么现在就面临两个问题：

  1. 数据发生变化怎么通知？
  2. 谁来重新构建 InheritedWidget？

2、数据变化构建

第一个问题其实很好解决，我们当然可以使用之前介绍的 eventBus来进行事件通知，但是为了更贴近Flutter开发，我们使用
Flutter中SDK中提供的 ChangeNotifier 类，它继承自Listenable，也实现了一个Flutter风格的发布者-订阅者模式
ChangeNotifier定义大致如下：

  1. class ChangeNotifier implements Listenable {
  2.   @override
  3.   void addListener(VoidCallback listener) {
  4.      //添加监听器
  5.   }
  6.   @override
  7.   void removeListener(VoidCallback listener) {
  8.     //移除监听器
  9.   }
  10.   void notifyListeners() {
  11.     //通知所有监听器，触发监听器回调   
  12.   }
  13.   // ... 省略无关代码
  14. }

我们可以通过调用：

  • addListener() 添加监听器（订阅者）
  • removeListener() 移除监听器（订阅者）
  • notifyListeners() 可以触发所有监听器回调

现在，我们将要共享的状态放到一个Model类中，然后让它继承自ChangeNotifier，这样当共享的状态改变时，我们只需要调用 notifyListeners() 来通知订阅者，然后由订阅者来重新构建InheritedProvider，这也是第二个问题的答案！接下来我们便实现这个订阅者类：

  1. // 该方法用于在Dart中获取模板类型
  2. Type _typeOf<T>() => T;
  4. class ChangeNotifierProvider<T extends ChangeNotifier> extends StatefulWidget {
  5.   ChangeNotifierProvider({
  6.     Key key,
  7.     this.data,
  8.     this.child,
  9.   });
  10.   final Widget child;
  11.   final T data;
  13.   //定义一个便捷方法，方便子树中的widget获取共享数据
  14.   static T of<T>(BuildContext context) {
  15.     final type = _typeOf<InheritedProvider<T>>();
  16.     final provider =  context.inheritFromWidgetOfExactType(type) as InheritedProvider<T>;
  17.     return provider.data;
  18.   }
  20.   @override
  21.   _ChangeNotifierProviderState<T> createState() => _ChangeNotifierProviderState<T>();
  22. }

该类继承StatefulWidget，然后定义了一个 of() 静态方法供子类方便获取Widget树中的InheritedProvider中保存的共享状态(model)

下面我们实现该类对应的_ChangeNotifierProviderState类：

  1. class _ChangeNotifierProviderState<T extends ChangeNotifier> extends State<ChangeNotifierProvider<T>> {
  2.   void update() {
  3.     //如果数据发生变化（model类调用了notifyListeners），重新构建InheritedProvider
  4.     setState(() => {});
  5.   }
  6.   @override
  7.   void didUpdateWidget(ChangeNotifierProvider<T> oldWidget) {
  8.     //当Provider更新时，如果新旧数据不"=="，则解绑旧数据监听，同时添加新数据监听
  9.     if (widget.data != oldWidget.data) {
  10.       oldWidget.data.removeListener(update);
  11.       widget.data.addListener(update);
  12.     }
  13.     super.didUpdateWidget(oldWidget);
  14.   }
  15.   @override
  16.   void initState() {
  17.     // 给model添加监听器
  18.     widget.data.addListener(update);
  19.     super.initState();
  20.   }
  21.   @override
  22.   void dispose() {
  23.     // 移除model的监听器
  24.     widget.data.removeListener(update);
  25.     super.dispose();
  26.   }
  27.   @override
  28.   Widget build(BuildContext context) {
  29.     return InheritedProvider<T>(
  30.       data: widget.data,
  31.       child: widget.child,
  32.     );
  33.   }
  34. }

可以看到_ChangeNotifierProviderState类的主要作用就是 监听到共享状态（model）改变时重新构建Widget树。

  • 注意，在_ChangeNotifierProviderState类中调用setState()方法，widget.child始终是同一个，所以执行build时，InheritedProvider的child引用的始终是同一个子widget，所以widget.child并不会重新build，这也就相当于对child进行了缓存！
  • 当然如果ChangeNotifierProvider父级Widget重新build时，则其传入的child便有可能会发生变化。

现在我们所需要的各个工具类都已完成，下面我们通过一个购物车的例子来看看怎么使用上面的这些类。

购物车示例

我们需要实现一个显示购物车中所有商品总价的功能：

  1. 向购物车中添加新商品时总价更新

定义一个Item类，用于表示商品信息：

  1. class Item {
  2.   Item(this.price, this.count);
  3.   double price; //商品单价
  4.   int count; // 商品份数
  5.   //... 省略其它属性
  6. }

定义一个保存购物车内商品数据的CartModel类:

  1. class CartModel extends ChangeNotifier {
  2.   // 用于保存购物车中商品列表
  3.   final List<Item> _items = [];
  4.   // 禁止改变购物车里的商品信息
  5.   UnmodifiableListView<Item> get items => UnmodifiableListView(_items);
  6.   // 购物车中商品的总价
  7.   double get totalPrice =>
  8.       _items.fold(0, (value, item) => value + item.count * item.price);
  9.   // 将 [item] 添加到购物车。这是唯一一种能从外部改变购物车的方法。
  10.   void add(Item item) {
  11.     _items.add(item);
  12.     // 通知监听器（订阅者），重新构建InheritedProvider， 更新状态。
  13.     notifyListeners();
  14.   }
  15. }

CartModel即要跨组件共享的model类。最后我们构建示例页面：

  1. class ProviderRoute extends StatefulWidget {
  2.   @override
  3.   _ProviderRouteState createState() => _ProviderRouteState();
  4. }
  5. class _ProviderRouteState extends State<ProviderRoute> {
  6.   @override
  7.   Widget build(BuildContext context) {
  8.     return Center(
  9.       child: ChangeNotifierProvider<CartModel>(
  10.         data: CartModel(),
  11.         child: Builder(builder: (context) {
  12.           return Column(
  13.             children: <Widget>[
  14.               Builder(builder: (context){
  15.                 var cart=ChangeNotifierProvider.of<CartModel>(context);
  16.                 return Text("总价: ${cart.totalPrice}");
  17.               }),
  18.               Builder(builder: (context){
  19.                 print("RaisedButton build"); //在后面优化部分会用到
  20.                 return RaisedButton(
  21.                   child: Text("添加商品"),
  22.                   onPressed: () {
  23.                     //给购物车中添加商品，添加后总价会更新
  24.                     ChangeNotifierProvider.of<CartModel>(context).add(Item(20.0, 1));
  25.                   },
  26.                 );
  27.               }),
  28.             ],
  29.           );
  30.         }),
  31.       ),
  32.     );
  33.   }
  34. }

整合代码

  1. import 'package:flutter/material.dart';
  2. import 'dart:collection';
  4. void main() => runApp(new MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return MaterialApp(
  10.         debugShowCheckedModeBanner: true,
  11.         title: 'WillPopScopeTestRoute',
  12.         theme: ThemeData(
  13.           primarySwatch: Colors.blue,
  14.         ),
  15.         home: Scaffold(
  16.           appBar: AppBar(title: Text("跨组件状态管理（Provider）")),
  17.           body: ProviderRoute(),
  18.         ));
  19.   }
  20. }
  22. class ProviderRoute extends StatefulWidget {
  23.   @override
  24.   _ProviderRouteState createState() => _ProviderRouteState();
  25. }
  27. class _ProviderRouteState extends State<ProviderRoute> {
  28.   @override
  29.   Widget build(BuildContext context) {
  30.     return Center(
  31.       child: ChangeNotifierProvider<CartModel>(
  32.         data: CartModel(),
  33.         child: Builder(builder: (context) {
  34.           return Column(
  35.             children: <Widget>[
  36.               Builder(builder: (context) {
  37.                 var cart = ChangeNotifierProvider.of<CartModel>(context);
  38.                 return Text("总价: ${cart.totalPrice}");
  39.               }),
  40.               Builder(builder: (context) {
  41.                 print("RaisedButton build"); //在后面优化部分会用到
  42.                 return RaisedButton(
  43.                   child: Text("添加商品"),
  44.                   onPressed: () {
  45.                     //给购物车中添加商品，添加后总价会更新
  46.                     print("1:点击了添加商品");
  47.                     ChangeNotifierProvider.of<CartModel>(context)
  48.                         .add(Item(20.0, 1));
  49.                   },
  50.                 );
  51.               }),
  52.             ],
  53.           );
  54.         }),
  55.       ),
  56.     );
  57.   }
  58. }
  60. //------------------------------------------------------------------------------------------
  61. class Item {
  62.   Item(this.price, this.count);
  63.   double price; //商品单价
  64.   int count; // 商品份数
  65. }
  67. //观察者,CartModel里面更新后调度 notifyListeners(),触发
  68. class CartModel extends ChangeNotifier {
  69.   // 用于保存购物车中商品列表
  70.   final List<Item> _items = [];
  72.   // 禁止改变购物车里的商品信息
  73.   UnmodifiableListView<Item> get items => UnmodifiableListView(_items);
  75.   // 购物车中商品的总价
  76.   double get totalPrice {
  77.     double totalPrice = _items.fold(0, (value, item) {
  78.       return (value + item.count * item.price);
  79.     });
  80.     print("CartModel中的double get totalPrice = $totalPrice");
  81.     return totalPrice;
  82.   }
  84.   // 将 [item] 添加到购物车。这是唯一一种能从外部改变购物车的方法。
  85.   void add(Item item) {
  86.     _items.add(item);
  87.     notifyListeners(); // 通知监听器（订阅者），重新构建InheritedProvider， 更新状态
  88.   }
  89. }
  91. /* 
  92. 事件中心处理观察者模式
  93. var ChangeNotifier = {list:[update() { setState(() => {}) }],
  94. addListener:(){},
  95. removeListener:(){},
  96. notifyListeners:(){}
  97. }  
  98. */
  99. class ChangeNotifier implements Listenable {
  100.   List<VoidCallback> list = [];
  101.   @override
  102.   void addListener(VoidCallback listener) {
  103.     //添加监听器
  104.     list.add(listener);
  105.   }
  107.   @override
  108.   void removeListener(VoidCallback listener) {
  109.     //移除监听器
  110.     list = [];
  111.   }
  113.   void notifyListeners() {
  114.     //通知所有监听器，触发监听器回调
  115.     list.forEach((item) => item());
  116.     print("通知所有监听器，触发监听器回调");
  117.   }
  118. }
  120. //-----------------------------------------------------------------------------
  121. // 该方法用于在Dart中获取模板类型
  122. Type _typeOf<T>() => T;
  124. class ChangeNotifierProvider<T extends ChangeNotifier> extends StatefulWidget {
  125.   ChangeNotifierProvider({
  126.     Key key,
  127.     this.data,
  128.     this.child,
  129.   });
  131.   final Widget child;
  132.   final T data;
  134.   //定义一个便捷方法，方便子树中的widget获取共享数据
  135.   static T of<T>(BuildContext context) {
  136.     final type = _typeOf<InheritedProvider<T>>();
  137.     final provider =
  138.         context.inheritFromWidgetOfExactType(type) as InheritedProvider<T>;
  140.     var testTotalPrice = (provider.data as CartModel)
  141.         ._items
  142.         .fold(0, (value, item) => value + item.count * item.price);
  143.     print("2:实现了第二步 ChangeNotifierProvider 【testTotalPrice $testTotalPrice】");
  144.     return provider.data;
  145.   }
  147.   @override
  148.   _ChangeNotifierProviderState<T> createState() =>
  149.       _ChangeNotifierProviderState<T>();
  150. }
  152. class _ChangeNotifierProviderState<T extends ChangeNotifier>
  153.     extends State<ChangeNotifierProvider<T>> {
  154.   void update() {
  155.     //如果数据发生变化（model类调用了 notifyListeners ），重新构建InheritedProvider
  156.     setState(() => {});
  157.   }
  159.   @override
  160.   void didUpdateWidget(ChangeNotifierProvider<T> oldWidget) {
  161.     //当Provider更新时，如果新旧数据不"=="，则解绑旧数据监听，同时添加新数据监听
  162.     if (widget.data != oldWidget.data) {
  163.       oldWidget.data.removeListener(update);
  164.       widget.data.addListener(update);
  165.     }
  166.     super.didUpdateWidget(oldWidget);
  167.   }
  169.   @override
  170.   void initState() {
  171.     // 给model添加监听器
  172.     widget.data.addListener(update);
  173.     super.initState();
  174.   }
  176.   @override
  177.   void dispose() {
  178.     // 移除model的监听器
  179.     widget.data.removeListener(update);
  180.     super.dispose();
  181.   }
  183.   @override
  184.   Widget build(BuildContext context) {
  185.     // Future.delayed(Duration(milliseconds: 0), () {
  186.     //   setState(() {});
  187.     // });
  188.     print("【widget.data:${widget.data}】【widget.child：${widget.child}】");
  189.     return InheritedProvider<T>(
  190.       //调用ChangeNotifierProvider<T>传进来的CartModel,在这里是Instance of 'CartModel'
  191.       data: widget.data,
  192.       child: widget.child,
  193.     );
  194.   }
  195. }
  197. /* 
  198. InheritedProvider, 保存任需要跨组件共享的状态,格式类型如下
  199. var InheritedProvider = {data:{CartModel:{
  200. _items:[],
  201. add:(){ _items.add(item); notifyListeners();}
  202. totalPrice:(){return <totalPrice>;}}}} 
  203. */
  204. class InheritedProvider<T> extends InheritedWidget {
  205.   InheritedProvider({@required this.data, Widget child}) : super(child: child);
  207.   //共享状态使用泛型,用来存储传进来的widget
  208.   final T data;
  210.   @override
  211.   bool updateShouldNotify(InheritedProvider<T> old) {
  212.     print(
  213.         "ShareDataWidget：【old:${old.data.toString()} new:$data ${old.data != data}】");
  214.     //在此简单返回true，则每次更新都会调用依赖其的子孙节点的`didChangeDependencies`。
  215.     return true;
  216.   }
  217. }
  219. //——————————————————————————————————————————————————————————————————————————————————————————————————-
  220. // ChangeNotifierProvider -> InheritedProvider -> CartModel -> ChangeNotifier -> Listenable
  221. // ChangeNotifierProvider对象的data = CartModel,然后在 build 里面返回 InheritedProvider对象（把CartModel传给InheritedProvider）
  222. // CartModel 继承 ChangeNotifier,可以调用 ChangeNotifier 的方法
  223. // 每次调用 ChangeNotifierProvider.of<CartModel>(context) 就会触发 ChangeNotifier 中的 notifyListeners,
  224. // notifyListeners 中的 list.forEach((item) => item())会把存在的方法执行;
  225. //——————————————————————————————————————————————————————————————————————————————————————————————————-
  226. /* 
  227. 1:点击了添加商品
  228. 2:实现了第二步 ChangeNotifierProvider 【testTotalPrice 0】
  229. 通知所有监听器，触发监听器回调
  230. 【widget.data:Instance of 'CartModel'】【widget.child：Builder】
  231. ShareDataWidget：【old:Instance of 'CartModel' new:Instance of 'CartModel' false】
  232. 2:实现了第二步 ChangeNotifierProvider 【testTotalPrice 20.0】
  233. CartModel中的double get totalPrice = 20.0
  234. RaisedButton build
  235. */

运行示例后效果如图所示：
跨组件状态共享（Provider） - 图1
每次点击”添加商品“按钮，总价就会增加20，我们期望的功能实现了！可能有些读者会疑惑，我们饶了一大圈实现这么简单的功能有意义么？

  • 其实，就这个例子来看，只是更新同一个路由页中的一个状态，我们使用ChangeNotifierProvider的优势并不明显，
  • 但是如果我们是做一个购物APP呢？由于购物车数据是通常是会在整个APP中共享的，比如会跨路由共享。
  • 如果我们将 ChangeNotifierProvider 放在整个应用的Widget树的根上，那么整个APP就可以共享购物车的数据了，这时ChangeNotifierProvider的优势将会非常明显。

虽然上面的例子比较简单，但它却将Provider的原理和流程体现的很清楚，下图是Provider的原理图：
跨组件状态共享（Provider） - 图2
Model变化后会自动通知ChangeNotifierProvider（订阅者），ChangeNotifierProvider内部会重新构建InheritedWidget，而依赖该InheritedWidget的子孙Widget就会更新。
我们可以发现使用Provider，将会带来如下收益：

  1. 我们的业务代码更关注数据了，只要更新Model，则UI会自动更新，而不用在状态改变后再去手动调用setState()来显式更新页面。
  2. 数据改变的消息传递被屏蔽了，我们无需手动去处理状态改变事件的发布和订阅了，这一切都被封装在Provider中了。这真的很棒，帮我们省掉了大量的工作！
  3. 在大型复杂应用中，尤其是需要全局共享的状态非常多时，使用Provider将会大大简化我们的代码逻辑，降低出错的概率，提高开发效率。

优化

我们上面实现的ChangeNotifierProvider是有两个明显缺点：

  • 代码组织问题
  • 性能问题

下面我们讨论优化

代码组织问题

我们先看一下构建显示总价Text的代码：

  1. Builder(builder: (context){
  2.   var cart=ChangeNotifierProvider.of<CartModel>(context);
  3.   return Text("总价: ${cart.totalPrice}");
  4. })

这段代码有两点可以优化：

  1. 需要显式调用 ChangeNotifierProvider.of，当APP内部依赖CartModel很多时，这样的代码将很冗余。
  2. 语义不明确；由于 ChangeNotifierProvider 是订阅者，那么依赖 CartModel 的Widget自然就是订阅者，其实也就是状态的消费者，如果我们用Builder 来构建，语义就不是很明确；如果我们能使用一个具有明确语义的Widget，比如就叫 Consumer，这样最终的代码语义将会很明确，只要看到 Consumer，我们就知道它是依赖某个跨组件或全局的状态。

为了优化这两个问题，我们可以封装一个Consumer Widget，实现如下：

  1. // 这是一个便捷类，会获得当前context和指定数据类型的Provider
  2. class Consumer<T> extends StatelessWidget {
  3.   Consumer({
  4.     Key key,
  5.     @required this.builder,
  6.     this.child,
  7.   })  : assert(builder != null),
  8.         super(key: key);
  9.   final Widget child;
  10.   final Widget Function(BuildContext context, T value) builder;
  12.   @override
  13.   Widget build(BuildContext context) {
  14.     return builder(
  15.       context,
  16.       ChangeNotifierProvider.of<T>(context), //自动获取Model
  17.     );
  18.   }
  19. }

Consumer 实现非常简单，它通过指定模板参数，然后再内部自动调用 ChangeNotifierProvider.of 获取相应的Model，并且 Consumer 这个名字本身也是具有确切语义（消费者）。现在上面的代码块可以优化为如下这样：

  1. Consumer<CartModel>(
  2.   builder: (cx, vm)=> Text("总价: ${cart.totalPrice}");
  3. )

是不是很优雅！

性能问题

上面的代码还有一个性能问题，就在构建”添加按钮“的代码处：

  1. Builder(builder: (context) {
  2.   print("RaisedButton build"); // 构建时输出日志
  3.   return RaisedButton(
  4.     child: Text("添加商品"),
  5.     onPressed: () {
  6.       ChangeNotifierProvider.of<CartModel>(context).add(Item(20.0, 1));
  7.     },
  8.   );
  9. }

我们点击”添加商品“按钮后，由于购物车商品总价会变化，所以显示总价的Text更新是符合预期的，但是”添加商品“按钮本身没有变化，是不应该被重新build的!
但是我们运行示例，每次点击”添加商品“按钮，控制台都会输出”RaisedButton build”日志，也就是说”添加商品“按钮在每次点击时其自身都会重新build！这是为什么呢？如果你已经理解了InheritedWidget的更新机制，

那么答案一眼就能看出：这是因为构建RaisedButton的Builder中调用了ChangeNotifierProvider.of，也就是说依赖了Widget树上面的InheritedWidget（即InheritedProvider ）Widget，所以当添加完商品后，CartModel发生变化，会通知ChangeNotifierProvider, 而ChangeNotifierProvider则会重新构建子树，所以InheritedProvider将会更新，此时依赖它的子孙Widget就会被重新构建。

问题的原因搞清楚了，那么我们如何避免这不必要重构呢？既然按钮重新被build是因为按钮和InheritedWidget建立了依赖关系，那么我们只要打破或解除这种依赖关系就可以了。那么如何解除按钮和InheritedWidget的依赖关系呢？我们上一节介绍InheritedWidget时已经讲过了：

调用inheritFromWidgetOfExactType() 和 ancestorInheritedElementForWidgetOfExactType()的区别就是前者会注册依赖关系，而后者不会。所以我们只需要将ChangeNotifierProvider.of的实现改为下面这样既可：

  1. //添加一个listen参数，表示是否建立依赖关系
  2.   static T of<T>(BuildContext context, {bool listen = true}) {
  3.     final type = _typeOf<InheritedProvider<T>>();
  4.     final provider = listen
  5.         ? context.inheritFromWidgetOfExactType(type) as InheritedProvider<T>
  6.         : context.ancestorInheritedElementForWidgetOfExactType(type)?.widget
  7.             as InheritedProvider<T>;
  8.     return provider.data;
  9.   }

然后我们将调用部分代码改为：

  1. Column(
  2.     children: <Widget>[
  3.       Consumer<CartModel>(
  4.         builder: (BuildContext cx, vm) =>Text("总价: ${cart.totalPrice}"),
  5.       ),
  6.       Builder(builder: (context) {
  7.         print("RaisedButton build");
  8.         return RaisedButton(
  9.           child: Text("添加商品"),
  10.           onPressed: () {
  11.             // listen 设为false，不建立依赖关系
  12.             ChangeNotifierProvider.of<CartModel>(context, listen: false)
  13.                 .add(Item(20.0, 1));
  14.           },
  15.         );
  16.       })
  17.     ],
  18.   )

修改后在此运行上面的示例，我们会发现点击”添加商品“按钮后，控制台不会再输出”RaisedButton build”了，即按钮不会被重新构建了。而总价仍然会更新，这是因为Consumer中调用ChangeNotifierProvider.of时listen值为默认值true，所以还是会建立依赖关系。
至此我们便实现了一个迷你的Provider，它具备Pub上Provider Package中的核心功能；但是我们的迷你版功能并不全面，如只实现了一个可监听的ChangeNotifierProvider，并没有实现只用于数据共享的Provider；另外，我们的实现有些边界也没有考虑的到，比如如何保证在Widget树重新build时Model始终是单例等。所以建议读者在实战中还是使用Provider Package，而本节实现这个迷你Provider的主要目的主要是为了帮助读者了解Provider Package底层的原理。

优化后的整合代码

  1. import 'package:flutter/material.dart';
  2. import 'dart:collection';
  4. void main() => runApp(new MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return MaterialApp(
  10.         debugShowCheckedModeBanner: true,
  11.         title: 'WillPopScopeTestRoute',
  12.         theme: ThemeData(
  13.           primarySwatch: Colors.blue,
  14.         ),
  15.         home: Scaffold(
  16.           appBar: AppBar(title: Text("跨组件状态管理（Provider）")),
  17.           body: ProviderRoute(),
  18.         ));
  19.   }
  20. }
  22. class ProviderRoute extends StatefulWidget {
  23.   @override
  24.   _ProviderRouteState createState() => _ProviderRouteState();
  25. }
  27. class _ProviderRouteState extends State<ProviderRoute> {
  28.   @override
  29.   Widget build(BuildContext context) {
  30.     return Center(
  31.       child: ChangeNotifierProvider<CartModel>(
  32.           data: CartModel(),
  33.           child: Column(
  34.             children: <Widget>[
  35.               Consumer<CartModel>(builder: (cx,vm)  {
  36.                 // var vm = ChangeNotifierProvider.of<CartModel>(context);
  37.                 return Text("总价: ${vm.totalPrice}");
  38.               }),
  39.               Builder(builder: (context) {
  40.                 print("__________________ RaisedButton build __________________"); //在后面优化部分会用到
  41.                 return RaisedButton(
  42.                   child: Text("添加商品"),
  43.                   onPressed: () {
  44.                     //给购物车中添加商品，添加后总价会更新
  45.                     print("1:点击了添加商品");
  46.                     ChangeNotifierProvider.of<CartModel>(context,listen: false).add(Item(20.0, 1));
  47.                     // vm.add(Item(20.0, 1));
  48.                   },
  49.                 );
  50.               }),
  51.             ],
  52.           )
  53.       ),
  54.     );
  55.   }
  56. }
  58. //------------------------------------------------------------------------------------------
  59. class Item {
  60.   Item(this.price, this.count);
  61.   double price; //商品单价
  62.   int count; // 商品份数
  63. }
  65. //观察者,CartModel里面更新后调度 notifyListeners(),触发
  66. class CartModel extends ChangeNotifier {
  67.   // 用于保存购物车中商品列表
  68.   final List<Item> _items = [];
  70.   // 禁止改变购物车里的商品信息
  71.   UnmodifiableListView<Item> get items => UnmodifiableListView(_items);
  73.   // 购物车中商品的总价
  74.   double get totalPrice {
  75.     double totalPrice = _items.fold(0, (value, item) {
  76.       return (value + item.count * item.price);
  77.     });
  78.     print("CartModel中的double get totalPrice = $totalPrice");
  79.     return totalPrice;
  80.   }
  82.   // 将 [item] 添加到购物车。这是唯一一种能从外部改变购物车的方法。
  83.   void add(Item item) {
  84.     _items.add(item);
  85.     notifyListeners(); // 通知监听器（订阅者），重新构建InheritedProvider， 更新状态
  86.   }
  87. }
  89. /*
  90. 事件中心处理观察者模式
  91. var ChangeNotifier = {list:[update() { setState(() => {}) }],
  92. addListener:(){},
  93. removeListener:(){},
  94. notifyListeners:(){}
  95. }
  96. */
  97. class ChangeNotifier implements Listenable {
  98.   List<VoidCallback> list = [];
  99.   @override
  100.   void addListener(VoidCallback listener) {
  101.     //添加监听器
  102.     list.add(listener);
  103.   }
  105.   @override
  106.   void removeListener(VoidCallback listener) {
  107.     //移除监听器
  108.     list = [];
  109.   }
  111.   void notifyListeners() {
  112.     //通知所有监听器，触发监听器回调
  113.     list.forEach((item) => item());
  114.     print("通知所有监听器，触发监听器回调");
  115.   }
  116. }
  118. //-----------------------------------------------------------------------------
  119. // 该方法用于在Dart中获取模板类型
  120. Type _typeOf<T>() => T;
  122. class ChangeNotifierProvider<T extends ChangeNotifier> extends StatefulWidget {
  123.   ChangeNotifierProvider({
  124.     Key key,
  125.     this.data,
  126.     this.child,
  127.   });
  129.   final Widget child;
  130.   final T data;
  132.   //定义一个便捷方法，方便子树中的widget获取共享数据
  133.   static T of<T>(BuildContext context, {bool listen = true}) {
  134.     final type = _typeOf<InheritedProvider<T>>();
  135.     // final provider =
  136.     //     context.inheritFromWidgetOfExactType(type) as InheritedProvider<T>;
  137.     final provider = listen
  138.         ? context.inheritFromWidgetOfExactType(type) as InheritedProvider<T>
  139.         : context.ancestorInheritedElementForWidgetOfExactType(type)?.widget
  140.     as InheritedProvider<T>;
  141.     // TODO 看看能不能优化
  142.     var testTotalPrice = (provider.data as CartModel)
  143.         ._items
  144.         .fold(0, (value, item) => value + item.count * item.price);
  145.     print("2:实现了第二步 ChangeNotifierProvider 【testTotalPrice $testTotalPrice】");
  146.     return provider.data;
  147.   }
  149.   @override
  150.   _ChangeNotifierProviderState<T> createState() =>
  151.       _ChangeNotifierProviderState<T>();
  152. }
  154. class _ChangeNotifierProviderState<T extends ChangeNotifier>
  155.     extends State<ChangeNotifierProvider<T>> {
  156.   void update() {
  157.     //如果数据发生变化（model类调用了 notifyListeners ），重新构建InheritedProvider
  158.     setState(() => {});
  159.   }
  161.   @override
  162.   void didUpdateWidget(ChangeNotifierProvider<T> oldWidget) {
  163.     //当Provider更新时，如果新旧数据不"=="，则解绑旧数据监听，同时添加新数据监听
  164.     if (widget.data != oldWidget.data) {
  165.       oldWidget.data.removeListener(update);
  166.       widget.data.addListener(update);
  167.     }
  168.     super.didUpdateWidget(oldWidget);
  169.   }
  171.   @override
  172.   void initState() {
  173.     // 给model添加监听器
  174.     widget.data.addListener(update);
  175.     super.initState();
  176.   }
  178.   @override
  179.   void dispose() {
  180.     // 移除model的监听器
  181.     widget.data.removeListener(update);
  182.     super.dispose();
  183.   }
  185.   @override
  186.   Widget build(BuildContext context) {
  187.     // Future.delayed(Duration(milliseconds: 0), () {
  188.     //   setState(() {});
  189.     // });
  190.     print("【widget.data:${widget.data}】【widget.child：${widget.child}】");
  191.     return InheritedProvider<T>(
  192.       //调用ChangeNotifierProvider<T>传进来的CartModel,在这里是Instance of 'CartModel'
  193.       data: widget.data,
  194.       child: widget.child,
  195.     );
  196.   }
  197. }
  199. /*
  200. InheritedProvider, 保存任需要跨组件共享的状态,格式类型如下
  201. var InheritedProvider = {data:{CartModel:{
  202. _items:[],
  203. add:(){ _items.add(item); notifyListeners();}
  204. totalPrice:(){return <totalPrice>;}}}}
  205. */
  206. class InheritedProvider<T> extends InheritedWidget {
  207.   InheritedProvider({@required this.data, Widget child}) : super(child: child);
  209.   //共享状态使用泛型,用来存储传进来的widget
  210.   final T data;
  212.   @override
  213.   bool updateShouldNotify(InheritedProvider<T> old) {
  214.     print(
  215.         "ShareDataWidget：【old:${old.data.toString()} new:$data ${old.data != data}】");
  216.     //在此简单返回true，则每次更新都会调用依赖其的子孙节点的`didChangeDependencies`。
  217.     return true;
  218.   }
  219. }
  221. //——————————————————————————————————————————————————————————————————————————————————————————————————-
  222. // 这是一个便捷类，会获得当前context和指定数据类型的Provider
  223. class Consumer<T> extends StatelessWidget {
  224.   Consumer({
  225.     Key key,
  226.     @required this.builder,
  227.     this.child,
  228.   })  : assert(builder != null),
  229.         super(key: key);
  230.   final Widget child;
  231.   final Widget Function(BuildContext context, T value) builder;
  233.   @override
  234.   Widget build(BuildContext context) {
  235.     return builder(
  236.       context,
  237.       ChangeNotifierProvider.of<T>(context), //自动获取Model
  238.     );
  239.   }
  240. }
  241. //——————————————————————————————————————————————————————————————————————————————————————————————————-
  242. // ChangeNotifierProvider -> InheritedProvider -> CartModel -> ChangeNotifier -> Listenable
  243. // ChangeNotifierProvider对象的data = CartModel,然后在 build 里面返回 InheritedProvider对象（把CartModel传给InheritedProvider）
  244. // CartModel 继承 ChangeNotifier,可以调用 ChangeNotifier 的方法
  245. // 每次调用 ChangeNotifierProvider.of<CartModel>(context) 就会触发 ChangeNotifier 中的 notifyListeners,
  246. // notifyListeners 中的 list.forEach((item) => item())会把存在的方法执行;
  247. //——————————————————————————————————————————————————————————————————————————————————————————————————-
  248. /* 
  249. 1:点击了添加商品
  250. 2:实现了第二步 ChangeNotifierProvider 【testTotalPrice 0】
  251. 通知所有监听器，触发监听器回调
  252. 【widget.data:Instance of 'CartModel'】【widget.child：Builder】
  253. ShareDataWidget：【old:Instance of 'CartModel' new:Instance of 'CartModel' false】
  254. 2:实现了第二步 ChangeNotifierProvider 【testTotalPrice 20.0】
  255. CartModel中的double get totalPrice = 20.0
  256. RaisedButton build
  257. */

其它状态管理包

现在Flutter社区已经有很多专门用于状态管理的包了，在此我们列出几个相对评分比较高的：

包名 介绍
Provider & Scoped Model 这两个包都是基于 InheritedWidget 的，原理相似
Redux 是Web开发中React生态链中Redux包的Flutter实现
MobX 是Web开发中React生态链中MobX包的Flutter实现
BLoC 是BLoC模式的Flutter实现

在此笔者不对这些包做推荐，读者有兴趣都可以研究一下，了解它们各自的思想

总结

本节通过介绍事件总线在跨组件共享中的一些缺点引出了通过InheritedWidget来实现状态的共享的思想，然后基于该思想实现了一个简单的Provider，在实现的过程中也更深入的探索了InheritedWidget与其依赖项的注册机制和更新机制。通过本节的学习，读者应该达到两个目标，首先是对InheritedWidget彻底吃透，其次是Provider的设计思想。
InheritedWidget是Flutter中非常重要的一个Widget，像国际化、主题等都是通过它来实现，所以我们也不惜篇幅，通过好几节来介绍它的，在下一节中，我们将介绍另一个基于InheritedWidget的组件Theme(主题)。