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

来源：oschina

链接：https://my.oschina.net/u/4358445/blog/4282795

标签

dart