Flutter事件总线插件rx_event_bus的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter事件总线插件rx_event_bus的使用

rx_event_bus

基于 RxDart 的事件总线。

安装

pubspec.yaml 添加依赖

dependencies:
  rx_event_bus: <last_version>

如何使用

因为 Dart 支持顶级函数, 所以可以直接定义

EventBus eventBus = EventBus();

然后定义通讯数据

class OnAppState {
  int state;
  const OnAppState(this.state); 
}

🛠 Base Broadcast

1. 注册接收器

eventBus.on<OnAppState>().listen((event) {
  print('event: ${event.state}');
});

2. 发送事件通知

eventBus.fire(OnAppState('paused'));

🧬 Sticky Broadcast

当上面的基础用法的发送事件通知在注册接收器前触发,则消息会丢失。如果需要得到消息,则可使用粘性广播。

1. 注册接收器

eventBus.onSticky<OnAppState>().listen((event) {
  print('event: ${event.state}');
});

2. 发送事件通知

设置 stickytrue 则可发送粘性广播。

eventBus.fire(OnAppState('paused'), sticky: true);

注意: 粘性广播默认只会保留上一次的数据。如需要自定义条数,可使用如下方式:

EventBus eventBus = EventBus(maxSize: 10);
  • maxSize: 粘性广播最大的留存条数

完整示例Demo

下面是一个完整的示例,展示了如何使用 rx_event_bus 插件来实现事件总线的基本功能。

步骤1: 创建一个简单的Flutter项目

首先,创建一个新的Flutter项目:

flutter create rx_event_bus_example
cd rx_event_bus_example

步骤2: 在 pubspec.yaml 中添加依赖

pubspec.yaml 文件中添加 rx_event_bus 依赖:

dependencies:
  flutter:
    sdk: flutter
  rx_event_bus: <last_version>

然后运行 flutter pub get 来获取依赖。

步骤3: 编写示例代码

lib/main.dart 文件中编写以下代码:

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

// 定义一个事件类
class OnAppState {
  int state;
  const OnAppState(this.state);
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final EventBus eventBus = EventBus();

  @override
  void initState() {
    super.initState();

    // 注册接收器
    eventBus.on<OnAppState>().listen((event) {
      print('event: ${event.state}');
    });

    // 发送事件通知
    Future.delayed(Duration(seconds: 2), () {
      eventBus.fire(OnAppState('paused'));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Rx Event Bus Example"),
      ),
      body: Center(
        child: Text("Check console for event output"),
      ),
    );
  }
}

运行示例

运行你的Flutter应用,并检查控制台输出,你应该能看到事件被正确地打印出来。

flutter run

更多关于Flutter事件总线插件rx_event_bus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter事件总线插件rx_event_bus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中,rx_event_bus 是一个流行的事件总线库,用于在不同的组件或页面间传递事件和数据。它基于 Dart 的 rxdart 库实现,提供了响应式编程的能力。以下是如何在 Flutter 应用中使用 rx_event_bus 的一个简单示例。

1. 添加依赖

首先,在你的 pubspec.yaml 文件中添加 rx_event_bus 依赖:

dependencies:
  flutter:
    sdk: flutter
  rx_event_bus: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

2. 定义事件类

定义一个事件类,通常这个类会包含你想要传递的数据。例如:

class MyEvent {
  final String message;

  MyEvent({required this.message});
}

3. 初始化 EventBus

在你的应用中创建一个全局的 EventBus 实例。通常,你会在应用的顶层(如 main.dart)中初始化它。

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

final eventBus = EventBus<dynamic>();

void main() {
  runApp(MyApp());
}

4. 订阅事件

在需要监听事件的组件中订阅该事件。例如,在一个 StatefulWidget 中:

import 'package:flutter/material.dart';
import 'package:rx_event_bus/rx_event_bus.dart';
import 'my_event.dart'; // 导入你定义的事件类

class EventSubscriber extends StatefulWidget {
  @override
  _EventSubscriberState createState() => _EventSubscriberState();
}

class _EventSubscriberState extends State<EventSubscriber> {
  @override
  void initState() {
    super.initState();
    // 订阅 MyEvent 事件
    eventBus.on<MyEvent>().listen((event) {
      // 处理事件
      print('Received event: ${event.message}');
    });
  }

  @override
  void dispose() {
    // 取消订阅
    eventBus.off<MyEvent>();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Event Subscriber'),
      ),
      body: Center(
        child: Text('Listening for events...'),
      ),
    );
  }
}

5. 发布事件

在需要发布事件的组件中发布该事件。例如,在另一个 StatelessWidget 中:

import 'package:flutter/material.dart';
import 'package:rx_event_bus/rx_event_bus.dart';
import 'my_event.dart'; // 导入你定义的事件类

class EventPublisher extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Event Publisher'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 发布 MyEvent 事件
            eventBus.fire(MyEvent(message: 'Hello, Event Bus!'));
          },
          child: Text('Publish Event'),
        ),
      ),
    );
  }
}

6. 整合应用

最后,将你的发布者和订阅者组件整合到你的应用中。例如,在 main.dart 中:

import 'package:flutter/material.dart';
import 'event_publisher.dart';
import 'event_subscriber.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter EventBus Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter EventBus Demo'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            EventPublisher(),
            SizedBox(height: 20),
            EventSubscriber(),
          ],
        ),
      ),
    );
  }
}

现在,当你点击 Event Publisher 页面上的按钮时,Event Subscriber 将接收到事件并打印出消息。

这个示例展示了如何在 Flutter 应用中使用 rx_event_bus 来实现事件总线机制。根据实际需求,你可以扩展和修改这个基础示例。

回到顶部