数据(事件)传递

flyou

发布于 2020-06-09 12:04:26

8940

发布于 2020-06-09 12:04:26

文章被收录于专栏：flutter开发者flutter开发者

在平时的开发中我们都会遇到很多数据传递的例子，在前面的文章中我们接触队夺得就是构造方法属性的传递，但是flutter中并不是只有这一种传递的方法，今天我们就来看看Flutter中常用的数据传递方式

1.构造方法属性传递

在前面的文章中我们多次使用到自定义Widget并传入相应的参数，这就是最简单的数据传递方法，上层通过下层Widget的构造方法将值传递给下层widget。

就比如下面的例子，我们定义了一个MyPageView的View，构造方法需要传入，leading和content两个参数。

class MyPageView extends StatelessWidget {
  final Widget _leading;
  final Widget _content;

  MyPageView(this._leading, this._content);

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(30),
      color: Colors.white,
      elevation: 15,
      shadowColor: Colors.grey,
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(15.0))),
      child: ListTile(
        leading: _leading,
        title: _content,
      ),
    );
  }
}

我们在调用的地方就需要传入这两个属性，这样以来数据就从上层传递到了下层。

MyPageView(
      Icon(
        Icons.home,
        color: Colors.blueAccent,	
      ),
      Text("我是内容")),
)

实现起来非常的简单，但是如果碰见多级别View的情况怎么办？对的，那么你的参数就需要从最上层一层一层的往下传递。

这就要用到我们下面要说到的内容了

2. InheritedWidget

InheritedWidget 是 Flutter 中的一个功能型 Widget，在构建Widget的同时可以在Widget层中向下传递，适用于在 Widget 树中共享数据的场景。通过它，我们可以高效地将数据在 Widget 树中进行跨层传递。

可能大家对InheritedWidget比较陌生，但是实际上我们会在很多场景中接触这个东西，比如我们常用的MediaQuery,和theme都会为我们提供很多有用的功能，比如

MediaQuery.of(context).devicePixelRatio

来获取设备分辨率

或者使用如下代码来获取主题颜色

Theme.of(context).accentColor

这其中都用到了InheritedWidget，当上层的Theme或者分辨率发生变更时下层的所有Widget都会发生变更，

InheritedWidget的数据是从上往下传递的。

接下来，我们就使用一个简单的例子来看下如何使用InheritedWidget,还是以计数器为例。

我们先声明一个数据类用来存储计数器的值

class MyInheritedModel {
  final int count;

  const MyInheritedModel(this.count);
}

然后定义CountContainer继承InheritedWidget来完成数据的更新判断与获取工作

class CountContainer extends InheritedWidget {
  static CountContainer of(BuildContext context) =>
      context.inheritFromWidgetOfExactType(CountContainer) as CountContainer;
  final MyInheritedModel model;

  CountContainer({
    Key key,
    @required this.model,
    @required Widget child,
  }) : super(key: key, child: child);

  @override
  bool updateShouldNotify(CountContainer oldWidget) =>
      myInheritedModel != oldWidget.myInheritedModel;
}

在CountContainer方法中，我们使用of方法来返回CountContainer对象，使用updateShouldNotify来判断数据是否可以更新。

在使用的地方调用CountContainer.of(context)方法即可获取CountContainer并获取model中的值。

void main() {
  runApp(new MaterialApp(
    home: CountContainer(
      child: MyApp(),
      model: MyInheritedModel(100),
    ),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    CountContainer container = CountContainer.of(context);
    return Scaffold(
      appBar: AppBar(
        title: Text("InheritedWidget"),
      ),
      body: Center(
        child: Text("Count:${container.model.count}"),
      ),
    );
  }
}

通过InheritedWidget我们可以实现数据的从上往下层传递，无论有多少成的嵌套我们都可以获取到它。

但是如果想要修改InheritedWidget中的值，通常情况下我们还是需要用到State。

具体代码见下方

void main() {
  runApp(new MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  MyInheritedModel _inheritedModel = new MyInheritedModel(0);

  add() {
    setState(() {
      _inheritedModel.count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CountContainer(model: this, child: ContentWidget(), increment: add);
  }
}

class ContentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    CountContainer container = CountContainer.of(context);
    return Scaffold(
      appBar: AppBar(
        title: Text("InheritedWidget"),
      ),
      body: Center(
        child: Text("Count:${container.model._inheritedModel.count}"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: container.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

class MyInheritedModel {
  int count;
  MyInheritedModel(this.count);
}

class CountContainer extends InheritedWidget {
  static CountContainer of(BuildContext context) =>
      context.inheritFromWidgetOfExactType(CountContainer) as CountContainer;
  final _MyAppState model;
  final Function() increment;

  CountContainer({
    Key key,
    @required this.model,
    @required Widget child,
    @required this.increment,
  }) : super(key: key, child: child);

  @override
  bool updateShouldNotify(CountContainer oldWidget) => model != oldWidget.model;
}

可以看到，我们把model改为State，使InheritedWidget持有State这样我们就可以通过InheritedWidget在任意的地方调用State中setStete方法来更新数据。

3.Notification

Notification中文意思是通知，与Android中的广播机制类似，在Flutter中Notification的功能是子节点状态变更，发送通知上报。

Notification的数据变更是通过Widgte树向上冒泡的，我们往往在下层Wdiget发送通知然后在上层处理通知。

首先我们创建通知类

class MyNotification extends Notification {
  final String info;
  MyNotification(this.info);
}

然后创建子Widget发送通知

class ChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: () => MyNotification("我是随机下面发送的数据：${Random().nextInt(1000)}").dispatch(context),
        child: Text("提交"),
      ),
    );
  }
}

最后我们创建parentWidgte使用NotificationListener接收通知并显示

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  String msg = "";

  onReceiveMessage(String message) {
    setState(() {
      msg =message;
    });
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener<MyNotification>(
      child: Column(
        children: [Text(msg), ChildWidget()],
      ),
      onNotification: (notification) {
        onReceiveMessage(notification.info);
        return true;
      },
    );
  }
}

我们在界面上放置了一个按钮，每次点击按钮们就会发送一个随机数通知，上层Widget通过监听获得下层发送的通知并并过SetState方法来更新UI。

看下效果：

4.EventBus

在上面的文章中我们具体了解了InheritedWidget从上往下的数据传递，和Notification从下往上的数据传递，虽然都可以实现数据跨多层传递的效果，但是他们都必须依赖于Wdiget树，没有办法脱离Wdiget使用。

下面我们就来介绍下Flutter中第三方组件EventBus的用法。

既然是事件总线，肯定是遵循发布/订阅模式的，允许任何订阅者接收并处理事件。

因为EventBus是第三方库，所以我们需要在 pubspec.yaml 引入它

dependencies:
event_bus: ^1.1.1

首先我们创建CustomEvent事件类

class CustomEvent {
  String info;

  CustomEvent(this.info);
}

然后创建EventBus并监听事件，在任意位置调用 eventBus.fire()即可发送事件，

class HomePage extends StatefulWidget {
  @override
  _MyState createState() => _MyState();
}

class _MyState extends State<HomePage> {
  EventBus eventBus = new EventBus();
  String info = "";

  @override
  void initState() {
    super.initState();
    eventBus.on<CustomEvent>().listen((event) {
      setState(() {
        info = event.info;
      });
    });
  }

  @override
  void dispose() {
    eventBus.destroy();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("EventBusTitle"),
      ),
      body: Container(
        child: Center(
          child: Column(
            children: [
              Text(info),
              RaisedButton(
                child: Text("发送"),
                onPressed: () {
                  eventBus.fire(
                      CustomEvent("我是随机下面发送的数据：${Random().nextInt(1000)}"));
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

当然效果与前面的Notification基本一致