Flutter|常用数据通讯组件

开发者 · 2024-9-10 02:14:10

在做需求时经常会遇到组件间通讯，本篇汇总了几种常用的通讯方式。

父子组件之间的通讯

最简朴的方式就是通过构造器转达数据，但当嵌套层级比力深的时，传参就比力丢脸了，大概这时还思量用单例，但对于简朴数据来说未免大材小用了。
比方，照旧这个二级页场景，由多个子孙组件构成（同色框表现同级），在顶层页面可以知道从上个页面携带的数据，但最下层的输入框组件（箭头位置）也须要知道部分数据才华发送批评，这里说下怎样用Provider快速实现。

Provider

先容：基于InheritedWidget，一种自上向下的共享数据机制，方便子孙节点得到祖先节点共享的数据。
举例：

// 1、添加依赖dependencies: provider: ^5.0.0 // 2、通过Provider包裹的child都共享数据 feedShareData...return Scaffold( ... body: Provider( create: (_) => feedShareData, child: Builder(builder: (context) { return FeedDetailPage(); }), ),);// 3、在子孙组件都可以读取并修改共享数据feedShareData = context.read<NormalFeedsDetailShareData>();...

实用场景：当子组件须要共享祖先/父组件的数据时，尤其在跨层转达场景。

除了数据共享外，另有就是数据转达，也就是组件想知道另个组件的某些厘革，并做出反应（callback）。在Dart中函数是可以当做对象转达的，但同样存在层级复杂时大概要转达大量的函数，接下来先容常用的数据转达组件。

ChangeNotifier

先容：可用于扩展Model，并在Model发生厘革时调用notifyListeners使得监听该Model的组件重新构建。
举例：详见官方提供的案例，实现了参加购物车的结果。
实用场景：常和Provider（Consumer）配套办理数据共享&状态转达题目。

NotificationListener

先容：关照机制，即每个节点都可以向上发送Notification（自下向上的），除非中途被拦截否则会一直向上传。
举例：在上篇Flutter小白|初探事故处置惩罚先容了怎样通过NotificationListener办理多个滑动组件下、监听最外层组件滑动到界限事故，可见使用NotificationListener可以很方便获取到可滑动子组件的滑动运动。固然还可以在子组件上通过Notification#dispatch发送自界说关照，然后在上层吸收并处置惩罚。

// 1、自界说关照类class CustomNotification extends Notification { String msg; CustomNotification(this.msg);}// 2、子组件发送关照...CustomNotification("Test").dispatch(context);...// 3、父组件吸收和处置惩罚关照...NotificationListener<CustomNotification>( onNotification: (notification) { // 处置惩罚逻辑 // 同样的返回值表现是否拦截 return true; }, child:...)

实用场景：当祖先/父组件要随着子组件的某些情况厘革而厘革时，常用于滑动情况。

兄弟组件之间的通讯

ValueListenableBuilder

先容：顾名思义，对某个 value举行监听，只要value发生厘革就会直接通过setState重新构建子组件树。同样的，由于会rebuild，使用时尽大概缩小包裹的组件范围，以镌汰不须要的组件被重修、进步性能。
举例：比方想要实现如许的需求，底部输入框有内容时按钮亮起，无内容按钮置灰，代码如下：

// 1、创建：界说一个文本内容的ValueNotifier，ValueNotifier<String> emojiInfoNotifier = ValueNotifier("");// 2、使用：输入框组件和按钮组件都监听这个string信息...ValueListenableBuilder( valueListenable: emojiInfoNotifier, builder: (BuildContext context, String value, Widget? child) { // 输入框组件，根据输入内容展示，没有内容展示默认文案 return Text( value.isEmpty ? Strings.share_thoughts : value, maxLines: 1, overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: Res.t12, color: Res.c1), ); },),...ValueListenableBuilder( valueListenable: emojiInfoNotifier, builder: (BuildContext context, String value, Widget? child) { // 按钮组件，根据有无内容改变icon颜色 return SvgPicture.asset( iconUrl, color: value.isEmpty ? Res.c4 : Res.c2, width: 16, height: 16, ); },),...// 3、随数据厘革而厘革：当点击心情按钮导致文本内容发生厘革时，输入框组件和按钮组件都会发生厘革，...GestureDetector( behavior: HitTestBehavior.opaque, onTap: () { // 高出最大心情展示个数会弹toast提示 if (emojiInfoNotifier.value.characters.length >= maxInputEmojiCount) { Toasts.show(Strings.input_more); } else { emojiInfoNotifier.value += emoji?.text ?? ""; } }, child:... // 心情按钮)...// 4、烧毁：在依赖组件dispose的同时烧毁@overridevoid dispose() { super.dispose(); emojiInfoNotifier.dispose(); ...}

实用场景：当组件A要随着其他组件B上操纵的数据厘革而厘革时，可以在同个组件树，也可以不是。常用于组件关系不复杂且监听数据简朴的情况。

EventBus

先容：对于要跨组件以致跨页面组件通讯的，这时用EventBus屡试不爽。关于 EventBus 开辟一定非常熟悉了，焦点就是观察者模式，一方发布消息，一方订阅感爱好的消息并做处置惩罚。
举例：

// 1、添加依赖dependencies: event_bus: ^2.0.0// 2、新增事故类class CustomEvent { String msg; CustomEvent(this.msg);}// 3、发送事故（用单例维护，这里不展示了） `EventBusExt.getDefault().fire(CustomEvent("test"));` // 4、订阅事故并处置惩罚EventBusExt.getDefault().on<CustomEvent>().listen((event) { // 处置惩罚逻辑});

实用场景：可以在任何位置转达事故，可以办理大多数通讯需求。

总结

本篇从数据通讯方式（共享数据、转达数据）和组件关系（父子关系、兄弟关系）两方面分别先容了Flutter中常用的组件，团体看Provider和EventBus总是能很好的处置惩罚各类场景，功能强盛，但也有维护本钱的题目（比如要新增许多事故类等），一些简朴场景可以思量其他小组件。

Flutter|常用数据通讯组件

所属分类: 问答交流

新帖推荐: 30日

推荐作品