构建自己的事件总线，轻松实现 Flutter 中跨页面数据传输

Android

2023-11-10 22:03:36

使用事件总线实现 Flutter 中高效的跨页面数据传输

跨页面数据传输：一种常见的需求

在 Flutter 应用开发中，跨页面数据传输是一个基本需求，因为它使开发人员能够在不同的屏幕或小部件之间共享信息。传统方法，如广播或全局状态管理工具，虽然可以满足这一需求，但它们却存在局限性和性能问题。

事件总线：一种优雅的解决方案

事件总线是一种设计模式，提供了一种发布-订阅机制，允许组件之间进行异步通信。在 Flutter 应用中，事件总线可以作为跨页面数据传输的理想解决方案，因为它具有以下优点：

松散耦合： 发布者和订阅者之间没有直接依赖关系，提高了代码的可维护性和灵活性。
可扩展性： 可以轻松添加和移除订阅者，满足不同场景下的需求。
异步通信： 事件总线通过异步机制进行数据传输，避免阻塞主线程。

构建自己的事件总线

要构建自己的事件总线，需要一个保存事件名和对应处理函数的映射表。具体步骤如下：

1. 创建事件总线类：

class EventBus {
  final Map<String, List<Function>> _eventMap = {};

  void on(String eventName, Function callback) {
    if (!_eventMap.containsKey(eventName)) {
      _eventMap[eventName] = [];
    }
    _eventMap[eventName]!.add(callback);
  }

  void off(String eventName, [Function? callback]) {
    if (_eventMap.containsKey(eventName)) {
      if (callback != null) {
        _eventMap[eventName]!.remove(callback);
      } else {
        _eventMap[eventName]!.clear();
      }
    }
  }

  void emit(String eventName, [dynamic data]) {
    if (_eventMap.containsKey(eventName)) {
      for (var callback in _eventMap[eventName]!) {
        callback(data);
      }
    }
  }
}

2. 实例化事件总线：

final eventBus = EventBus();

使用事件总线

1. 订阅事件：

eventBus.on('my_event', (data) {
  // 接收到数据后的处理逻辑
});

2. 发布事件：

eventBus.emit('my_event', 'Hello from Page 1');

示例：

下面是一个示例，演示如何使用事件总线在两个页面之间传输数据：

Page1.dart

import 'package:flutter/material.dart';
import 'package:event_bus/event_bus.dart';

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    eventBus.emit('my_event', 'Hello from Page 1');
    return Container();
  }
}

Page2.dart

import 'package:flutter/material.dart';
import 'package:event_bus/event_bus.dart';

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    eventBus.on('my_event', (data) {
      print('Received data: $data');
    });
    return Container();
  }
}