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事件才會響應。

以上！有疑問歡迎留言！