Flutter 数据共享 - InheritedWidget

InheritedWidget 提供了数据在 widget 中从上到下传递共享的方式;在根 widget 中共享一个数据,便可以在任意子 widget 中获取该共享数据;对于需要在 widget 树中共享数据的场景十分方便;Flutter SDK 中亦是通过 InheritedWidget 共享应用的主题(theme)、语言环境(Locale) 信息;

InheritedWidget 和 React 中的 context 功能类似,和逐级传递数据相比,它们能实现组件跨级传递数据。InheritedWidget 的在 widget 树中数据传递方向是从上到下的,这和通知 Notification 的传递方向正好相反。

State 中的 didChangeDependencies 回调,会在父 widget 中 InheritedWidget 的数据发生变化时被 Flutter Framework 调用;如果有使用 didChangeDependencies 则表示子 widget 有依赖 InheritedWidget,没有使用则表示没有依赖;因此我们可以在 InheritedWidget 发生变化时对组件进行更新;当应用的主题(theme)、语言环境(Locale) 信息发生变化时, 子 widget 的 didChangeDependencies 方法将被调用;

被调用当依赖发生变化后 Framework 都会调用 build 方法,因此一般情况下子 widget 很少会重写 didChangeDependencies;但是如果需要执行一些比较昂贵的操作(如网络请求),最好的方式就是在此方法中执行,以避免每次 build 都触发该操作;

🌰

通过继承 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.inheritFromWidgetOfExactType(ShareDataWidget);
  }

  //该回调决定当data发生变化时,是否通知子树中依赖data的Widget  
  @override
  bool updateShouldNotify(ShareDataWidget old) {
    //如果返回true,则子树中依赖(build函数中有调用)本widget
    //的子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的值自增:

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自增,然后重新build,ShareDataWidget的data将被更新  
              onPressed: () => setState(() => ++count),
            )
          ],
        ),
      ),
    );
  }
}

如果_TestWidget的build方法中没有使用ShareDataWidget的数据,那么它的didChangeDependencies()将不会被调用,因为它并没有依赖ShareDataWidget

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");
  }
}

如果只想在 __TestWidgetState 中引用 ShareDataWidget 数据,但却不希望在 ShareDataWidget 发生变化时调用 __TestWidgetState的didChangeDependencies() 方法
唯一的改动就是获取 ShareDataWidget 对象的方式,把 inheritFromWidgetOfExactType() 方法换成了
context.ancestorInheritedElementForWidgetOfExactType(ShareDataWidget).widget

@override
InheritedElement ancestorInheritedElementForWidgetOfExactType(Type targetType) {
  final InheritedElement ancestor = _inheritedWidgets == null ? null :  _inheritedWidgets[targetType];
  return ancestor;
}

@override
InheritedWidget inheritFromWidgetOfExactType(Type targetType, { Object aspect }) {
  final InheritedElement ancestor = _inheritedWidgets == null ? null :   _inheritedWidgets[targetType];
  //多出的部分
  if (ancestor != null) {
    assert(ancestor is InheritedElement);
    return inheritFromElement(ancestor, aspect: aspect);
  }
  _hadUnsatisfiedDependencies = true;
  return null;
}
  • 注 inheritFromElement 主要是注册依赖关系 因此调用 inheritFromWidgetOfExactType 后,子孙组件便完成了注册, InheritedWidget 发生变化后, 就会更新依赖它的子孙组件,同时调用子孙组件的 didChangeDependencies 和 build 方法; 而使用 ancestorInheritedElementWidgetOfExactType 由于没有注册依赖关系,因此当 inheritedWidget 发生变化时就不会更新子孙组件
@override
InheritedWidget inheritFromElement(InheritedElement ancestor, { Object aspect }) {
  //注册依赖关系
  _dependencies ??= HashSet<InheritedElement>();
  _dependencies.add(ancestor);
  ancestor.updateDependencies(this, aspect);
  return ancestor.widget;
}
资料

《Flutter 实战》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容