使用InheritedWidget被忽略的要点

我们知道，flutter提供了一套功能粒度划分非常细的基本组件，并推荐利用组合的方式来构建布局，这确实很便捷、高效，但是也导致了Widget层次结构嵌套非常深，即使是一个很简单的页面。而不论什么页面，控件之间往往存在某些状态依赖关系，假使让一个结构形如“A->B->C->…->Z”中的A传递数据给Z，如果利用构造函数来一层层传递，效率可想而知。好在官方提供了 InheritedWidget 。

InheritedWidget的好处不言而喻，从起官方文档的定义即可知：

Base class for widgets that efficiently propagate information down the tree.

To obtain the nearest instance of a particular type of inherited widget from a build context, use BuildContext.inheritFromWidgetOfExactType.

Inherited widgets, when referenced in this way, will cause the consumer to rebuild when the inherited widget itself changes state.

通过直译（加揣度），大意就是包含以下两个特性：

InheritedWidget是一个可以在树中高效地向下传递数据的组件：我们可以在以 InheritedWidget 为节点的树下任一Widget中调用 BuildContext.inheritFromWidgetOfExactType 来获取离其最近的 InheritedWidget 实例。
当以上面这种方式（调用inheritFromWidgetOfExactType方法时）被引用后，每当InheritedWidget自身的状态改变时，会导致 “consumer”（调用inheritFromWidgetOfExactType方法的这个Child）重新 build 。

SDK提供的Theme就是基于该特性，实现了配置的传递和配置的动态改变。

案例

目前网上也有很多使用教程，核心大致实现inherited_widget_test.dart，其结构图如下所示：

我们先简单描述下代码逻辑：

WidgetA 调用了inheritFromWidgetOfExactType方法，获得了存放在 MyInherited 对象里的 data 数据并显示在 WidgetA 内容上，同时使得 WidgetA 和 MyInherited 产生关联；
当点击 FlatButton 触发 MyWidget 状态更新时， MyState 的 build 方法回调，重新构建 MyInherited 对象传入新值，由于data发生变化， MyInherited 的方法 updateShouldNotify 中返回了true，最终使得与MyInherited 关联的 WidgetA 触发reBuild。

当我们运行并点击FlatButton后，页面表现得确实如上述所示，WidgetA的内容由 WidgetA data = 0 变为了 WidgetA data = 1，似乎 InheritedWidget 正确的使用方式正是如此，但是log里输出的却是如下：

I/flutter: onPressed
I/flutter: MyWidget build
I/flutter: MyInherited construct
I/flutter: MyInherited updateShouldNotify result = true
I/flutter: WidgetA build
I/flutter: WidgetB build

可以看到，结合前面的代码逻辑分析，理论上只有 WidgetA 才会reBuild，而现在却产生了 I/flutter: WidgetB build 这条记录。这是为什么呢？

原因分析

其实可以从前面提到的特性2找到答案。其中说到：InheriteWidget 状态发生变化时会rebuild相关的child。 我们知道，flutter中Widget被标识为了@immutable，即是不可变的，那么所谓的状态发生变化就意味着InheriteWidget重新构建，由于前面代码中在InheriteWidget构造时同时也构造的其child对象，因此当InheriteWidget重新构建时也会导致child跟着重新构建，这样也就失去了 “rebuild相关的child” 的意义，

也就是说，要想特性2生效，需要保证InheriteWidget节点下的树不会被重新构建。

推荐做法

将InheriteWidget 的child转化为const，这样即使在重建 InheriteWidget 时，由于其child得到的是同一个对象，也就不会导致这个子树重建，选择性reBuild也就得到了保证。但是由于const特性，相关的参数也必须是常量，因此需要重写或修改的代码量相对较多，因此更推荐下面的做法。

我们可以参考Theme的实现方式，Theme是一个普通的Widget，其build方法如下：

/// Theme.class
@override
Widget build(BuildContext context) {
    return _InheritedTheme(
      theme: this,
      child: IconTheme(
        data: data.iconTheme,
        child: child,
      ),
    );
}

其中，_InheritedTheme 就是InheritedWidget，其child参数所指向的child对象是在Theme的构造函数中传入：

const Theme({
    Key key,
    @required this.data,
    this.isMaterialAppTheme = false,
    @required this.child,
  })

这样就避免了当触发Theme的build方法进而导致_InheritedTheme重建时，child也被重新实例化的情况。

对于StatefulWidget来说，InheritedWidget是在State对象的build方法中实例化的，setState触发的是State的build，而StatefulWidget本身是没有重新实例化的，也就保证了child没有被重新实例化。

现在我们在保证层级结构不变的前提下，重新对上述式例进行优化，修改后的代码位于inherited_widget_test_2.dart，其中 WidgetA和WidgetB 对象已经提前于InheritedWidget在 MyWidget 构建期间实例化，当MyWidget执行 build 方法时触发InheritedWidget构建时再作为参数传入。这样只要 MyWidget 不重新构建，child也就不会构建，每次触发 MyWidget 的 State 变化时，只有InheritedWidget才会重新构建。

当我们再次点击FlatButton时，日志将如下所示：

I/flutter: onPressed
I/flutter: MyWidget build
I/flutter: MyInherited construct
I/flutter: MyInherited updateShouldNotify result = true
I/flutter: WidgetA build

结束

InheritedWidget 是学习flutter不得不掌握的一个特殊组件，具备向下传值和选择性reBuild子树节点的特性，许多SDK组件包括第三方库包都是基于其特性实现，本文结合官方文档发现并解决了一个使用InheritedWidget时容易被忽略的问题，并给出推荐方案。

感谢阅读。

linjiang's blog