使用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属性中：
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回调中打印日志：
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：
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),
)
],
),
),
);
}
}然后运行，运行之后发现每点击一次按钮，计数器都会自增，并且控制台会打印出一句日志：
Dependencies change由此可见，子widget的state的依赖发生变化后，其didChangeDependencies函数将会被调用。不过一定需要再次着重说明的一点是，如果_TestWidget的build方法中没有使用ShareDataWidget中的数据，那么它的didChangeDependencies将不会被调用，因为它并没有依赖ShareDataWidget。例如，我们将__TestWidgetState代码改为如下这样，didChangeDependencies将不会被调用：
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");
}
}上面👆的代码中，我们将build方法中依赖ShareDataWidget的代码注释掉了，然后返回了一个固定的Text，这样一来，当点击Increment按钮后，ShareDataWidget的data虽然发生变化，但是__TestWidgetState并未依赖ShareDataWidget，所以__TestWidgetState的didChangeDependencies方法不会被调用。其实这个机制很好理解，当数据发生变化的时候，只对使用了该数据的widget进行更新。
深入理解InheritedWidget
接下来我们考虑一个问题，如果我们只是想在__TestWidgetState中引用ShareDataWidget中的数据，但是并不希望在ShareDataWidget中的数据发生变化的时候调用__TestWidgetState中的didChangeDependencies方法，这个时候应该怎么办呢？其实答案很简单，只需要将ShareDataWidget.of()的实现改一下即可：
//定义一个便捷方法，方便子树中的widget获取共享数据
static ShareDataWidget of(BuildContext context) {
//return context.dependOnInheritedWidgetOfExactType<ShareDataWidget>();
return context.getElementForInheritedWidgetOfExactType<ShareDataWidget>().widget;
}唯一的改动就是获取ShareDataWidget对象的方式，把dependOnInheritedWidgetOfExactType()方法换成了context.getElementForInheritedWidgetOfExactType<ShareDataWidget>().widget，那么它们到底有什么区别呢，我们看一下这两个方法的源码（实现代码在Element类中，这里的context就是_element）：
@override
InheritedElement getElementForInheritedWidgetOfExactType<T extends InheritedWidget>() {
assert(_debugCheckStateIsActiveForAncestorLookup());
final InheritedElement ancestor = _inheritedWidgets == null ? null : _inheritedWidgets[T];
return ancestor;
}
@override
InheritedWidget dependOnInheritedWidgetOfExactType({ Object aspect }) {
assert(_debugCheckStateIsActiveForAncestorLookup());
final InheritedElement ancestor = _inheritedWidgets == null ? null : _inheritedWidgets[T];
//多出的部分
if (ancestor != null) {
assert(ancestor is InheritedElement);
return dependOnInheritedElement(ancestor, aspect: aspect) as T;
}
_hadUnsatisfiedDependencies = true;
return null;
}可以看到，dependOnInheritedWidgetOfExactType() 比 getElementForInheritedWidgetOfExactType()多调了dependOnInheritedElement方法，dependOnInheritedElement源码如下：
@override
InheritedWidget dependOnInheritedElement(InheritedElement ancestor, { Object aspect }) {
assert(ancestor != null);
_dependencies ??= HashSet<InheritedElement>();
_dependencies.add(ancestor);
ancestor.updateDependencies(this, aspect);
return ancestor.widget;
}可以看到dependOnInheritedElement方法中主要是注册了依赖关系！看到这里也就清晰了，调用dependOnInheritedWidgetOfExactType() 和 getElementForInheritedWidgetOfExactType()的区别就是前者会注册依赖关系，而后者不会，所以在调用dependOnInheritedWidgetOfExactType()时，InheritedWidget和依赖它的子孙组件关系便完成了注册，之后当InheritedWidget发生变化时，就会更新依赖它的子孙组件，也就是会调这些子孙组件的didChangeDependencies()方法和build()方法。而当调用的是 getElementForInheritedWidgetOfExactType()时，由于没有注册依赖关系，所以之后当InheritedWidget发生变化时，就不会更新相应的子孙 Widget。
但是实际的运行效果与上面的分析好像有点出入：如果将上面示例中ShareDataWidget.of()方法实现改成调用getElementForInheritedWidgetOfExactType()，运行示例后，点击"Increment"按钮，会发现__TestWidgetState的didChangeDependencies()方法确实不会再被调用，但是其build()仍然会被调用！按照上面的分析，build()也不会被调用啊，可是这里的build被调用了，是为啥呢？
造成这个的原因其实是，点击"Increment"按钮后，会调用_InheritedWidgetTestRouteState的setState()方法，此时会重新构建整个页面，由于示例中，__TestWidget 并没有任何缓存，所以它也都会被重新构建，所以也会调用build()方法。
那么，这就带来了一个问题，实际上，我们只想更新子树中依赖了ShareDataWidget的组件，而现在只要调用_InheritedWidgetTestRouteState的setState()方法，所有子节点都会被重新build，这很没必要，那么有什么办法可以避免呢？答案是缓存！我在使用Provider来进行状态管理中介绍的Provider就是对InheritedWidget的封装，而刚才说到的缓存操作，在Provider中是有实现的。因此，如果要做状态共享，还是选择Provider，因为它是更高级的一种封装，使用起来更简单，性能也更好。