Flutter 数据共享InheritedWidget的一些小心得

1,825 阅读3分钟

背景:在Flutter中,组件之间的数据传递是必不可少的,或许是非常常见的。例如一个页面由几个子组件组成,而且层级过多,如果都要通过构造函数取传输数据,这笔定是及其复杂和麻烦的。然后Flutter提供了原生的数据共享组件InheritedWidget,这就极大的化繁为简了。 数据共享的方式:

  • InheritedWidget
  • Notifcation
  • eventbus

1、什么是InheritedWidget?

InheritedWidget是Flutter中非常重要的一个功能型组件,它提供了一种数据在widget树中从上到下传递、共享的方式,比如我们在应用的父widget中通过InheritedWidget共享了一个数据,那么我们便可以在任意子widget中来获取该共享的数据。

  • 注意:在跨页面之间,如果不存在父widget和子widget,是无法只单纯通过InheritedWidget数据共享,需要结合ChangeNotifier做全局状态共享。所以常用于同个页面父widget和众多的子widget实现数据共享。这也就很好的说明了父Widget共享数据出来,任意子widget获取该共享数据。当然,在APP的根组件MateralApp外面设置了InheritedWidget,所有页面所有组件都可以共享到,例如共享应用主题(Theme)和Locale (当前语言环境)信息。

下面我们就看看如何使用

2、新建一个数据分享widget,继承InheritedWidget

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函数中有调用)本widget
    //的子widget的`state.didChangeDependencies`会被调用
    return old.data != data;
  }
}

3、在父widget使用ShareDataWidget

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("InheritedWidget"),
      ),
      body: Center(
        child: ShareDataWidget(//父widget
          data: count,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(bottom: 20.0),
                //注意:如果不使用builder或者单独抽取成一个组件类,
                //而是像注释这样直接使用是错误的;
                //child: Text(ShareDataWidget.of(context).data.toString()),//错误用法,非子widget
                用法1:
                child: Builder(//子widget中依赖ShareDataWidget
                  builder: (context) {
                    return Text(ShareDataWidget.of(context).data.toString());
                  },
                ), 
                //用法2:
                 _TestWidget(),
              ),
              RaisedButton(
                child: Text("Increment"),
                //每点击一次,将count自增,然后重新build,ShareDataWidget的data将被更新
                onPressed: () => setState(() => ++count),
              )
            ],
          ),
        ),
      ),
    );
  }
}

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");
  }
}
  • 应该在didChangeDependencies()中做什么? 一般来说,子widget很少会重写此方法,因为在依赖改变后framework也都会调用build()方法。但是,如果你需要在依赖改变后执行一些昂贵的操作,比如网络请求,这时最好的方式就是在此方法中执行,这样可以避免每次build()都执行这些昂贵操作。

4、如果不希望在ShareDataWidget发生变化时调用didChangeDependencies()

static ShareDataWidget of(BuildContext context) {
  //return context.dependOnInheritedWidgetOfExactType<ShareDataWidget>();
  return context.getElementForInheritedWidgetOfExactType<ShareDataWidget>().widget;
}

5、阻止重新绘制思想

实际上,我们只想更新子树中依赖了ShareDataWidget的组件,而现在只要调用_InheritedWidgetTestRouteState的setState()方法,所有子节点都会被重新build,这很没必要,那么有什么办法可以避免呢?答案是缓存!一个简单的做法就是通过封装一个StatefulWidget,将子Widget树缓存起来。实现后续更新!!!