Flutter事件总线插件xt_event_bus的使用

xt_event_bus 是一个强大的库，它简化了在你的 Flutter 应用程序中的事件驱动通信。基于流行的 EventBus 模式，该库为在应用程序的不同组件之间高效地交换消息、通知和数据提供了简洁的解决方案。通过 xt_event_bus，你可以轻松解耦和组织代码，从而更好地分离关注点，并促进更清晰和可维护的架构。通过采用发布-订阅模型，该库允许你创建动态且灵活的通信通道，使应用的不同部分之间的连接变得轻而易举。

安装

$ dart pub add xt_event_bus

使用

如果你想要监听特定事件，我们建议使用 EventHandler<T> 混入类（mixin）。要接收事件，你需要调用 subscribe 方法。要释放资源，你应该调用 unsubscribe 方法。要处理事件，你应该重写 onEvent 方法。

例如，我们有一个事件 MyEvent。

class MyEvent {}

对于使用 EventHandler<MyEvent> 混入类来监听此事件：

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> with EventHandler<MyEvent> {
  [@override](/user/override)
  void initState() {
    super.initState();
    subscribe();
  }

  [@override](/user/override)
  void dispose() {
    unsubscribe();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold();
  }

  [@override](/user/override)
  void onEvent(MyEvent event) {
    // 一些操作
  }
}

为了发出事件，我们建议使用 EventEmitter<T> 混入类，你应该调用 emit 方法，这样所有类型为 T 的订阅者都会收到该事件。

class OtherScreenWidget extends StatelessWidget with EventEmitter<MyEvent> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            emit(MyEvent());
          },
          child: Text('发送事件'),
        ),
      ),
    );
  }
}

如果你希望不使用混入类来监听事件，你可以使用 EventBus 类的 on<T> 方法。 on<T> 方法返回一个 Stream，你需要手动进行监听和处理流订阅。

例如：

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  StreamSubscription<MyEvent>? subscription;

  [@override](/user/override)
  void initState() {
    super.initState();
    subscription = EventBus().on<MyEvent>().listen((event) {
      // 一些操作
    });
  }

  [@override](/user/override)
  void dispose() {
    subscription?.cancel();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

为了不使用混入类来发出事件，你应该调用 EventBus 类的 emit<T> 方法。

例如：

EventBus().emit<MyEvent>(MyEvent());

日志记录

为了记录日志，你可以实现 EventBusLog 接口并将你的日志实现设置到 EventBus 中。

例如：

class MyEventBysLog implements EventBusLog {
  [@override](/user/override)
  void onEmit(event) {
    print('On emit: $event');
  }

  [@override](/user/override)
  void onEvent(event) {
    print('On received: $event');
  }

  [@override](/user/override)
  void onSubscribe(Type type) {
    print('On subscribe: $type');
  }
}

void main() {
    EventBus().log = MyEventBysLog();
}

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

caililin 1楼

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

当然，以下是一个关于如何在Flutter项目中使用xt_event_bus事件总线插件的示例代码。这个插件允许你在Flutter应用中的不同组件之间进行事件通信。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加xt_event_bus的依赖：

dependencies:
  flutter:
    sdk: flutter
  xt_event_bus: ^最新版本号  # 请替换为实际最新版本号

然后运行flutter pub get来安装依赖。

2. 初始化EventBus

在你的应用入口文件（通常是main.dart）中，初始化EventBus：

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

void main() {
  // 初始化EventBus
  EventBus.builder().init();
  
  runApp(MyApp());
}

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

3. 定义事件类

定义一个事件类，该类需要继承自Event（如果你使用的是xt_event_bus的默认实现）：

import 'package:xt_event_bus/xt_event_bus.dart';

class CustomEvent extends Event {
  String message;

  CustomEvent(this.message);
}

4. 发送事件

在某个组件中发送事件：

import 'package:flutter/material.dart';
import 'package:xt_event_bus/xt_event_bus.dart';
import 'custom_event.dart';  // 导入CustomEvent类

class SenderScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Sender Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 发送事件
            EventBus.get().post(CustomEvent("Hello from Sender!"));
          },
          child: Text('Send Event'),
        ),
      ),
    );
  }
}

5. 订阅事件

在另一个组件中订阅并处理该事件：

import 'package:flutter/material.dart';
import 'package:xt_event_bus/xt_event_bus.dart';
import 'custom_event.dart';  // 导入CustomEvent类

class ReceiverScreen extends StatefulWidget {
  @override
  _ReceiverScreenState createState() => _ReceiverScreenState();
}

class _ReceiverScreenState extends State<ReceiverScreen> {
  String eventMessage = "";

  @override
  void initState() {
    super.initState();
    
    // 订阅事件
    EventBus.get().on<CustomEvent>().listen((event) {
      setState(() {
        eventMessage = event.message;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Receiver Screen')),
      body: Center(
        child: Text(eventMessage),
      ),
    );
  }
}

6. 将组件集成到应用中

最后，将发送和接收组件集成到你的应用中，例如使用底部导航栏：

import 'package:flutter/material.dart';
import 'sender_screen.dart';
import 'receiver_screen.dart';

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

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Event Bus Demo'),
      ),
      body: Center(
        child: IndexedStack(
          index: _selectedIndex,
          children: <Widget>[
            SenderScreen(),
            ReceiverScreen(),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.send),
            label: 'Sender',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.receive),
            label: 'Receiver',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
    );
  }
}

这就是一个完整的示例，展示了如何在Flutter项目中使用xt_event_bus插件进行事件通信。你可以根据需要进行扩展和修改。