Flutter学习笔记（34）--EventBus的使用

如需转载，请注明出处：Flutter学习笔记（34）--EventBus的使用

在Android我们经常会使用到EventBus来进行通信，常用到的场景就是不同的页面来传递数据，Flutter中也可以通过EventBus来进行不同页面间的数据传递。

EventBus就是一条事件订阅总线，有事件的订阅者、事件的发布者。

demo就是模拟了一下页面间的数据传递，页面A跳转到页面B，从页面B返回到页面A的时候，通过EventBus传递数据给页面A。

先大体说一下用法结构

1.导入EventBus依赖：

event_bus: ^1.1.0

2.单例模式创建EventBus工具类

import 'package:event_bus/event_bus.dart';

class EventBusUtils {
  static EventBus _instance;

  static EventBus getInstance() {
    if (null == _instance) {
      _instance = new EventBus();
    }
    return _instance;
  }
}

3.创建事件，这个事件其实就是一个用来承载共享数据的载体

class StringContentEvent{
  String str;
StringContentEvent(this.str);
}

class DoubleContentEvent{
  double max;
  DoubleContentEvent(this.max);
}

4.订阅方订阅事件

import 'package:flutter/material.dart';
import 'package:study_app/EventBusRouteDemo.dart';
import 'package:study_app/util/DoubleContentEvent.dart';
import 'package:study_app/util/StringContentEvent.dart';
import 'package:study_app/util/EventBusUtils.dart';

class EventBusDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _EventBusDemoState();
  }
}

class _EventBusDemoState extends State {
  String _content = '我是曾经的数据';
  double _max = 0.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'EventBusDemo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('EventBusDemo'),
          actions: <Widget>[
            IconButton(
                icon: Icon(Icons.navigate_next),
                onPressed: () {
                  EventBusUtils.getInstance().on<StringContentEvent>().listen((event) {
                    print(event.str);
                    setState(() {
                      _content = event.str;
                    });
                  });
                  EventBusUtils.getInstance().on<DoubleContentEvent>().listen((event) {
                    print(event.max);
                    setState(() {
                      _max = event.max;
                    });
                  });
                  Navigator.push(
                      context,
                      new MaterialPageRoute(
                          builder: (context) => new EventBusRouteDemo()));
                })
          ],
        ),
        body: Center(
          child: Text(_content + _max.toString()),
        ),
      ),
    );
  }

  @override
  void deactivate() {
    // TODO: implement deactivate
    super.deactivate();
  }

  @override
  void dispose() {
    super.dispose();
    //关闭event事件流,不然会造成内存泄漏,调用如下代码即可:
    EventBusUtils.getInstance().destroy();
  }
}

 

5.事件的发布方发布事件

import 'package:flutter/material.dart';
import 'package:study_app/util/DoubleContentEvent.dart';
import 'package:study_app/util/StringContentEvent.dart';
import 'package:study_app/util/EventBusUtils.dart';

class EventBusRouteDemo extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _EventBusRouteDemoState();
  }
}

class _EventBusRouteDemoState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'EventBusRouteDemo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('EventBusRouteDemo'),
          leading: IconButton(icon: Icon(Icons.arrow_back_ios), onPressed: (){
            EventBusUtils.getInstance().fire(DoubleContentEvent(2.2));
            Navigator.of(context).pop();
          }),
        ),
        body: Center(
          child: Text('EventBusRouteDemo'),
        ),
      ),
    );
  }
}

 看下效果：

        

 这里可能有人会有疑问，如果多个页面都通过EventBus进行事件订阅，那么当我们发布事件的时候，会不会多个页面都监听到了呢，回答是不会的，这是因为我们前面创建的事件来决定的。

EventBusUtils.getInstance().fire(DoubleContentEvent(2.2));

 

可以看到我创建的是两个不同的事件，在发布的时候，我发布的是DoubleContentEvent这个事件，所以在订阅的地方，只有订阅的DoubleContentEvent事件才会响应。

以上！有疑问欢迎留言！