使用InheritedWidget来进行状态管理

之前我写过一篇文章使用Provider来进行状态管理，介绍了在Flutter中如何通过Provider来进行状态管理，今天我们来介绍状态管理的另外一种方式——InheritedWidget。实际上，Provider的底层也是通过InheritedWidget来实现的。

InheritedWidget是Flutter中非常重要的一个功能性组件，它提供了一种数据在widget树中自上而下传递、共享的方式。比如，我们在应用的根Widget中通过InheritedWidget共享了一个数据，那么我们就可以在任意的子Widget中获取到共享的这个数据。该特性在一些需要在Widget树中共享数据的场景中非常方便，Flutter SDK中正是通过InheritedWidget来共享应用主题（Theme）和当前语言环境（Locale）信息的。

比如现在有一个页面，里面的页面元素有5级，现在需要将数据从最上层传递到最下层，那么可以采取一级一级逐级传递的方式，但是这不是最优雅的方式，优雅的方式是采用上面所说的InheritedWidget的方式，这样就可以实现组件的跨级传递数据了。

上面说的传递数据都是自顶而下的顺序去传的，如果现在需要自下而上进行数据的传递，该怎么办呢？答案是采用Notification通知机制。

didChangeDependencies

每一个StatefulWidget对应的State对象里面都会有一个didChangeDependencies回调，它会在“依赖”发生变化的时候被Flutter Framework调用。而这里的这个“依赖”，指的就是子widget中是否使用了父widget中的InheritedWidget的数据，如果使用了则代表子widget有依赖InheritedWidget，如果没有使用则代表没有依赖InheritedWidget。这样的机制可以使子widget在其所依赖的InheritedWidget发生变化的时候来更新自身！比如在主题、locale(语言)等发生变化的时候，依赖其的子widget中的didChangeDependencies方法将会被调用。

接下来我们通过一个计数器的例子来看一下InheritedWidget 的使用。

首先，我们通过继承InheritedWidget，将当前计数器的点击次数保存在ShareDataWidget的data属性中：

代码语言：javascript复制

class ShareDataWidget extends InheritedWidget {
  ShareDataWidget({
    @required this.data,
    Widget child
  }) :super(child: child);

   
  final int data; //需要在子树中共享的数据，保存点击次数

   
  //定义一个便捷方法，方便子树中的widget获取共享数据  
  static ShareDataWidget of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<ShareDataWidget>();
  }


  //该回调决定当data发生变化时，是否通知子树中依赖data的Widget  
  @override
  bool updateShouldNotify(ShareDataWidget old) {
    //如果返回true，则子树中依赖(build函数中有调用)ShareDataWidget的子widget的`state.didChangeDependencies`将会被调用
    return old.data != data;
  }
}

然后我们实现一个子组件_TestWidget，在其build方法中引用ShareDataWidget中的数据，同时，在其didChangeDependencies回调中打印日志：

代码语言：javascript复制

class _TestWidget extends StatefulWidget {
  @override
  __TestWidgetState createState() => new __TestWidgetState();
}


class __TestWidgetState extends State<_TestWidget> {
  @override
  Widget build(BuildContext context) {
    //使用InheritedWidget中的共享数据
    return Text(ShareDataWidget
        .of(context)
        .data
        .toString());
  }


  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    //父或祖先widget中的InheritedWidget改变(并且updateShouldNotify返回true)时会被调用。
    //如果build中没有依赖InheritedWidget，则此回调不会被调用。
    print("Dependencies change");
  }
}

最后，我们创建一个按钮，每点击一次，就将ShareDataWidget中的data值增1：

代码语言：javascript复制

class InheritedWidgetTestRoute extends StatefulWidget {
  @override
  _InheritedWidgetTestRouteState createState() => new _InheritedWidgetTestRouteState();
}


class _InheritedWidgetTestRouteState extends State<InheritedWidgetTestRoute> {
  int count = 0;


  @override
  Widget build(BuildContext context) {
    return  Center(
      child: ShareDataWidget( //使用ShareDataWidget来做最外层的包裹
        data: count,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(bottom: 20.0),
              child: _TestWidget(),//子widget中依赖ShareDataWidget
            ),
            RaisedButton(
              child: Text("Increment"),
              //每点击一次，将count自增，然后通过setState触发build重建，ShareDataWidget的data将被更新  
              onPressed: () => setState(() =>   count),
            )
          ],
        ),
      ),
    );
  }
}

然后运行，运行之后发现每点击一次按钮，计数器都会自增，并且控制台会打印出一句日志：

代码语言：javascript复制

Dependencies change

由此可见，子widget的state的依赖发生变化后，其didChangeDependencies函数将会被调用。不过一定需要再次着重说明的一点是，如果_TestWidget的build方法中没有使用ShareDataWidget中的数据，那么它的didChangeDependencies将不会被调用，因为它并没有依赖ShareDataWidget。例如，我们将__TestWidgetState代码改为如下这样，didChangeDependencies将不会被调用：

代码语言：javascript复制

class __TestWidgetState extends State<_TestWidget> {
  @override
  Widget build(BuildContext context) {
    // 这里并没有使用InheritedWidget中的共享数据
    //    return Text(ShareDataWidget
    //        .of(context)
    //        .data
    //        .toString());
    return Text("text");
  }


  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // build方法中没有依赖InheritedWidget，因此该回调不会被调用。
    print("Dependencies change");
  }
}

上面