Flutter 跨组件状态共享

在应用开发过程中,状态管理是一个绕不开的话题;一般情况下,由组件管理私有的状态,如果状态需要跨组件进行共享,则需要交由共同的父组件进行管理。

当前对于跨组件状态共享的管理方式比较多,比如:全局事件总线 EventBus ,其通过观察者模式进行实现,发布者负责更新、发布状态,观察者监听状态的改变,并执行一些操作;

enum Event{
  change,
}

// 状态改变后发布状态改变事件
bus.emit(Event.change);

// 状态变化处理逻辑
void onChangedHandle(e){}

// 组件状态初始化时订阅状态改变事件
@override
void initState() {
  bus.on(Event.change, onChangeHandle);
  super.initState();
}

// 组件销毁时主动取消订阅避免内存泄露
@override
void dispose() {
  bus.off(Event.change, onChangeHandle);

  super.dispose();
}

不过 EventBus 的缺点亦非常的明显,我们必须显示的定义各种事件,同时阅者必须需显式注册状态改变回调,也必须在组件销毁时手动去解绑回调以避免内存泄露;

Flutter 中 InheritedWidget 默认就提供了与子孙组件的依赖关系,并且当 InheritedWidget 数据发生变化时,可以自动更新依赖的子孙组件;因此在跨组件状态共享的时候我们只需要将状态保存在 InheritedWidget 中,并在子孙组件中引用依赖即可;

🌰

// 创建通用的 InheritedWidget,用于保存任需要跨组件共享的状态
// 由于业务数据不可预期,因此使用范型来定义通用类
class InheritedProvider<T> extends InheritedWidget {
  InheritedProvider({
    @required this.data,
    Widget child
  }) : super(child: child);

  //共享状态使用泛型
  final T data;

  @override
  bool updateShouldNotify(InheritedProvider<T> old) {
    // 在此简单返回true,则每次更新都会调用依赖其的子孙节点的 `didChangeDependencies`。
    return true;
  }
}

通用类创建完成后,接下来就需要在数据发生变化时重新构建 InheritedProvider,这时我们就会面临两个问题:

  1. 数据发生变化怎么通知?
  2. 谁来重新构建 InheritedProvider?
    首先,为了更贴近 Flutter 开发,我们使用 Flutter SDK 中提供的 ChangeNotifier 类 来实现 EventBus,它继承自Listenable,也实现了一个Flutter风格的发布者-订阅者模式
class ChangeNotifier implements Listenable {

  @override
  void addListener(VoidCallback listener) {
     //添加监听器
  }
  @override
  void removeListener(VoidCallback listener) {
    //移除监听器
  }

  void notifyListeners() {
    //通知所有监听器,触发监听器回调   
  }
  ...
}

接下来,我们需要将共享状态放到一个 Modal 类中,并让 Modal 类来继承 ChangeNotifier ;这样当共享的状态发生变化时,我们只需要调用 notifyListeners() 通知订阅者,然后由订阅者来创建 InheritedProvider 就可以了

// 该方法用于在Dart中获取模板类型
Type _typeOf<T>() => T;

class ChangeNotifierProvider<T extends ChangeNotifier> extends StatefulWidget {
  ChangeNotifierProvider({
    Key key,
    this.data,
    this.child,
  });

  final Widget child;
  final T data;

  //定义一个of静态方法,方便子树中的 widget 获取 inheritedProvider 中保存的共享状态(Modal)
  static T of<T>(BuildContext context) {
    final type = _typeOf<InheritedProvider<T>>();
    final provider =  context.inheritFromWidgetOfExactType(type) as InheritedProvider<T>;
    return provider.data;
  }

  @override
  _ChangeNotifierProviderState<T> createState() => _ChangeNotifierProviderState<T>();
}


class _ChangeNotifierProviderState<T extends ChangeNotifier> extends State<ChangeNotifierProvider<T>> {
  void update() {
    //如果数据发生变化(model类调用了notifyListeners),重新构建InheritedProvider
    setState(() => {});
  }

  @override
  void didUpdateWidget(ChangeNotifierProvider<T> oldWidget) {
    //当Provider更新时,如果新旧数据不"==",则解绑旧数据监听,同时添加新数据监听
    if (widget.data != oldWidget.data) {
      oldWidget.data.removeListener(update);
      widget.data.addListener(update);
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  void initState() {
    // 给model添加监听器
    widget.data.addListener(update);
    super.initState();
  }

  @override
  void dispose() {
    // 移除model的监听器
    widget.data.removeListener(update);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return InheritedProvider<T>(
      data: widget.data,
      child: widget.child,
    );
  }
}

_ChangeNotifierProviderState 类的主要是 监听共享状态改变时重新构建 widget 树;不过还需注意的是 _ChangeNotifierProviderState 中调用了 setState 方法,widget.child 始终是同一个,所以在执行 build 时,InheritedProvider 的 child 引用始终是同一个widget,widget.child 并不会重新 build,相当于对 child 进行了缓存;当然如果是 ChangeNotifierProvider 父 widget 重新 build 其传人的 child 亦可能发生变化

资料

《Flutter 实战》

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,470评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,393评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,577评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,176评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,189评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,155评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,041评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,903评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,319评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,417评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,013评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2 353

推荐阅读更多精彩内容