本文主要是介绍Flutter状态管理系列之InheritedWidget,Notifcation,eventbus的使用和原理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
InheritedWidget
示例
构造函数传值：
继承 InheritedWidget 传值：
Notification
示例
EventBus
示例
示例完整源码
Flutter是由众多widget构成的UI框架，之前的文章我们在不同的widget之间传递数据是通过构造函数传参的方式传递。如果嵌套的widget过多，这么写不免有些麻烦且层级复杂。所以Flutter还提供了其他方案来实现跨 widget 间数据的传递，下面就介绍InheritedWidget、Notification 和 EventBus这三种方案。
InheritedWidget
InheritedWidget 是widget的基类，可有效地向下传播信息。
可以理解为子 widget可以在任何位置获取继承了InheritedWidget的父 widget中的数据。
示例
示例中通过构造函数和继承InheritedWidget两种方式实现父 widget ：FrogColor向子 widget：FColor传值。
构造函数传值：
继承 InheritedWidget 传值：
首先定义一个类FrogColor继承InheritedWidget，并在构造方法中传递数据和方法：model 和 doSomeThing
class FrogColor extends InheritedWidget {
const FrogColor({
Key key,
@required this.model,
@required this.doSomeThing,
@required Widget child,
}) : assert(model != null),
assert(child != null),
super(key: key, child: child);
// 直接从 _FirstPageState 中的 State 获取数据，这里可指定为泛型
final _FirstPageState model;
// 方法
final Function() doSomeThing;
// 获取实例
static FrogColor of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<FrogColor>();
}
// 判断是否需要更新
@override
bool updateShouldNotify(FrogColor old) => model != old.model;
}
在布局中使用FrogColor包裹FColor子widget，同时传递data和 doSomeThing 方法。由于上面定义的data是_FirstPageState所以这里直接传递this，doSomeThing方法中我们传递了_changeColor用于改变mColor的值，并且在子布局中能够刷新显示最新的color。
最后我们在FColor中获取到FrogColor中的date数据和调用doSomeThing 方法
上面的FrogColor中model是直接传入_FirstPageState，这样耦合度会比较高
所以我们将这个对象转为泛型，封装后如下：
新建 state_provider.dart文件:
import 'package:flutter/material.dart';
/// 使用泛型传入数据
class IProvider<T> extends InheritedWidget {
// 数据
final T data;
// 方法
final Function() doSomeThing;
IProvider({Key key, Widget child, this.data, this.doSomeThing})
: super(key: key, child: child);
@override
bool updateShouldNotify(IProvider oldWidget) {
return data != oldWidget.data;
}
static IProvider<T> of<T>(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<IProvider<T>>();
}
}
封装好的使用需要传入数据类：
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('InheritedWidget'),
),
body: IProvider<_FirstPageState>(// 传入 _FirstPageState
data: this
doSomeThing: _changeColor,//提供修改数据的方法
child: FColor('哈哈哈'),
)
);
}
以上就是InheritedWidget的使用，使用InheritedWidget的方式可以降低数据和UI界面的耦合。
直接使用InheritedWidget不免有些麻烦，Flutter提供了更加强大的 Provider 库，用于实现依赖注入和状态管理（后续了解之后详细介绍）。
InheritedWidget仅限与从父widget向下传递数据。那么从子widget向上传递数据如何实现呢？Notifiation就可以实现。
Notification
Notification 数据共享方式是从子 widgetw 向上传递至父widget`。
在之前的文章 Flutter 嵌套滚动 CustomScrollView 示例 中，我们使用NotificationListener去监听子child CustomScrollView的滑动距离。
同理，将子widget的数据传递给父widget也可以用这个方式实现
示例
从子widget向上发送数据，在父widget中监听到消息并打印在控制台。
以上就是Notification的使用，使用Notification的方式可以子widget的数据通过dispatch发送给父widget。
无论是 InheritedWidget还是 Notificaiton，都需要依赖与父子关系的widget。
而一些场景下的数据传递是没有这层关系的，
在Android中有事件总线的方式可以很方便的实现这类场景的数据传递，
Flutter中也有这样类似的库：EventBus
EventBus
使用Dart Streams进行应用程序解耦的简单事件总线。
示例
引入库
dependencies:
event_bus: ^1.1.1
初始化EventBus，并定义消息数据类
final eventBus = new EventBus();
/// 传递的数据
class MsgEvent{
final String msg;
MsgEvent(this.msg);
}
监听
// 监听数据变化
eventBus.on<MsgEvent>().listen((event) {
print("接收到的数据：${event.msg}");
});
发送数据
eventBus.fire(MsgEvent("子 widget 发送过来的数据：老头子"));
通过以上的4步即可完成不依赖widget的数据传输。
示例完整源码
import 'package:event_bus/event_bus.dart';
import 'package:flutter/material.dart';
final eventBus = EventBus();
class FirstPage extends StatefulWidget {
@override
_FirstPageState createState() {
return _FirstPageState();
}
}
class _FirstPageState extends State<FirstPage> {
@override
void initState() {
super.initState();
// 监听数据变化
eventBus.on<MsgEvent>().listen((event) {
print("接收到的数据：${event.msg}");
});
}
@override
void dispose() {
super.dispose();
// 释放资源
eventBus.destroy();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('EventBus'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// 子 widget
RaisedButton(
// 按钮点击时分发通知
onPressed: () {
eventBus.fire(MsgEvent("父 widget 发送过来的数据：我是你爸爸"));
},
child: Text("父 widget 发送数据"),
),
CustomChild(),
],
));
}
}
class CustomChild extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
// 按钮点击时分发通知
onPressed: () {
eventBus.fire(MsgEvent("子 widget 发送过来的数据：老头子"));
},
child: Text("子 widget 发送数据"),
);
}
}
/// 消息数据类
class MsgEvent{
final String msg;
MsgEvent(this.msg);
}
wan~
————————————————
版权声明：本文为CSDN博主「_龙衣」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ITxiaodong/article/details/105083180
https://www.bilibili.com/video/BV17J411J7Ko
这篇关于Flutter状态管理系列之InheritedWidget,Notifcation,eventbus的使用和原理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
