Flutter - 数据共享(InheritedWidget)

662 阅读4分钟

InheritedWidget

InheritedWidget是Flutter中非常重要的一个功能型组件,它提供了一种在Widget树中从上到下共享数据的方式,比如在应用的根Widget中通过InheritedWidget共享一个数据,便可以在任意的子Widget中来获取该共享数据。这个特性在一些需要在整个widget树中共享数据的场景中非常实用。如Flutter中正式通过InteritedWidget来共享应用主题(Theme)和Locale(当前语言环境)信息。InteritedWidget在widget树中传递方向是从上到下,和通知Notification的传递方向相反。

实例:

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

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

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

  //该回调决定当data发生变化时,是否通知子树中依赖data的Widget重新build
  @override
  bool updateShouldNotify(ShareDataWidget old) {
    return old.data != data;
  }
}
//在一个子组件的build中引用一个ShareDataWidget中的数据。
//同时在didChangeDependencies回调中打印日志。
class _TestWidget extends StatefulWidget {
  @override
  __TestWidgetState createState() => __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");
  }
}

didchangeDependencies

didChangeDependencies是State对象的一个回调,它会在依赖发生变化时被Flitter框架调用。而这个依赖指的就是子widget是否使用了父widget中InheritedWidget的数据!如果使用了,则代表子Widget有依赖;如果没有使用则代表没有依赖。这种机制可以使子组件在所依赖的InheritedWidget发生变化时来更新自身!比如当主题、locale(语言)等发生变化时,依赖其子Widget的didChangeDependencies方法将会被调用。

创建一个按钮点击使ShareDataWidget的值增加:

class InheritedWidgetTestRoute extends StatefulWidget {
  @override
  _InheritedWidgetTestRouteState createState() => _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
            ),
            ElevatedButton(
              child: Text("Increment"),
              //每点击一次,将count自增,然后重新build,ShareDataWidget的data将被更新  
              onPressed: () => setState(() => ++count),
            )
          ],
        ),
      ),
    );
  }
}

可以看到DidChangeDependencies中也会有回调。需要注意的是,如果_TestWidget的build方法中没有使用ShareDataWidget的数据,那么didChangeDependencies将不会被调用,因为并没有依赖ShareDataWidget。

一般来说,子Widget很少会重写didChangeDependencies方法,因为依赖改变后Flutter框架会调用build方法重新构建组件树。但是如果需要在依赖改变后执行一些昂贵的操作,比如网络请求、数据读写等,这时最好的方法就是在此函数中执行,避免每次build都会执行一些昂贵的操作。

深入了解InheritedWidget

如果在上面实例中_TestWidgetState中引用ShareDataWidget数据,但不希望在ShareDataWidget发生变化时调用_TestWidgetState的di dChangeDependencies方法,那么需要将ShareDataWidget.of()的实现修改一下:

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

唯一的改动就是获取ShareDataWidget对象的方式,把dependOnInheritedWidgetOfExactType()方法换成了context。getElementForInheriredWidgetOfExactType().widget。两者的区别是:

@override
InheritedElement getElementForInheritedWidgetOfExactType<T extends InheritedWidget>() {
  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) {
    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发生变化时,就不会更新相应的子组件。

需要注意的是:如果ShareDataWidget.of()方法实现改成getElementForInheritedWidgetOfExactType,运行后,点击Increment按钮,会发现_TestWidgetState的didChangeDependencies函数不会再被调用,但是build函数依然会被调用!造成这个的原因是,点击Increment按钮会调用_InheritedWidgetTestRouteState的setState函数,此时会重新构建整个页面,由于_TestWidget没有缓存,所以它也会被重新构建,也就会调用build方法。

那么一个新问题:如果只想更新子树中依赖了ShareDataWidget的组件,而现在只要调用_InheritedWidgetTestRouteState的setState函数,所有的子节点都会被重新build,这个没必要,也会造成资源浪费。如果需要处理这个问题,一个简单的方法就是通过封装一个StatefulWidget,将子Widget树缓存起来。