Flutter事件总线插件typed_event_bus的使用

Flutter事件总线插件typed_event_bus的使用

typed_event_bus 是一个简单的事件总线插件,支持类型化的事件和订阅链。以下是该插件的使用方法和示例代码。

使用

要使用此插件,你需要在项目的 pubspec.yaml 文件中添加 typed_event_bus 作为依赖项。

dependencies:
  typed_event_bus: ^x.x.x

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

示例

以下是一个完整的示例,展示了如何使用 typed_event_bus 插件来处理不同类型事件的订阅和发布。

import 'package:typed_event_bus/typed_event_bus.dart';

// 定义一个事件类
class TestEvent {}

// 定义另一个带数据的事件类
class TestDataEvent {
  final String message;

  TestDataEvent(this.message);
}

void main() {
  // 创建事件总线实例
  final bus = TypedEventBus();

  // 订阅事件
  final subscription = bus.onEvent<TestEvent>((_) {
    print('Catch only TestEvent data');
  }).onEvent<TestDataEvent>((data) {
    print('Catch only TestDataEvent data');
    print('With message ${data.message}');
  });

  // 发布事件
  bus.emit<TestEvent>(TestEvent());
  bus.emit(TestDataEvent('from'));

  // 取消订阅
  subscription.dispose();
  
  // 释放事件总线资源
  bus.dispose();
}

代码解释

  1. 定义事件类

    class TestEvent {}
    

    这里定义了一个空的事件类 TestEvent

  2. 定义带数据的事件类

    class TestDataEvent {
      final String message;
    
      TestDataEvent(this.message);
    }
    

    这里定义了一个带有字符串消息的事件类 TestDataEvent

  3. 创建事件总线实例

    final bus = TypedEventBus();
    

    创建一个 TypedEventBus 实例 bus

  4. 订阅事件

    final subscription = bus.onEvent<TestEvent>((_) {
      print('Catch only TestEvent data');
    }).onEvent<TestDataEvent>((data) {
      print('Catch only TestDataEvent data');
      print('With message ${data.message}');
    });
    

    使用 bus.onEvent 方法订阅两种类型的事件。当接收到 TestEvent 时,打印 “Catch only TestEvent data”;当接收到 TestDataEvent 时,打印 “Catch only TestDataEvent data” 和消息内容。

  5. 发布事件

    bus.emit<TestEvent>(TestEvent());
    bus.emit(TestDataEvent('from'));
    

    使用 bus.emit 方法发布两种类型的事件。

  6. 取消订阅和释放资源

    subscription.dispose();
    bus.dispose();
    

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

1 回复

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


当然,关于Flutter中typed_event_bus插件的使用,下面是一个详细的代码案例,展示了如何设置和使用事件总线来在不同组件之间传递事件和数据。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加typed_event_bus依赖:

dependencies:
  flutter:
    sdk: flutter
  typed_event_bus: ^latest_version  # 请替换为最新版本号

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

2. 定义事件类型

创建一个事件类,用于传递数据。例如,我们可以创建一个简单的事件类来表示一个字符串消息:

// event.dart
class StringMessageEvent {
  final String message;

  StringMessageEvent(this.message);
}

3. 创建事件总线

接下来,我们创建一个事件总线实例。通常,这个实例会在应用的全局范围内被创建和访问,例如在一个单例类中。

// event_bus.dart
import 'package:typed_event_bus/typed_event_bus.dart';
import 'event.dart';

class EventBus {
  static final EventBus _instance = EventBus._internal();

  factory EventBus() => _instance;

  EventBus._internal();

  final EventBus<StringMessageEvent> _stringEventBus = EventBus<StringMessageEvent>();

  EventBus<StringMessageEvent> get stringEventBus => _stringEventBus;
}

4. 发布事件

在需要发布事件的地方,获取事件总线实例并发布事件。例如,在一个按钮点击事件中:

// main.dart (部分代码)
import 'package:flutter/material.dart';
import 'event_bus.dart';
import 'event.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Typed Event Bus Demo'),
        ),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final EventBus eventBus = EventBus();

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        eventBus.stringEventBus.fire(StringMessageEvent('Hello, Event Bus!'));
      },
      child: Text('Fire Event'),
    );
  }
}

5. 订阅事件

在需要监听事件的地方,订阅事件总线。例如,在一个不同的组件中:

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

class ListenerWidget extends StatefulWidget {
  @override
  _ListenerWidgetState createState() => _ListenerWidgetState();
}

class _ListenerWidgetState extends State<ListenerWidget> {
  final EventBus eventBus = EventBus();

  @override
  void initState() {
    super.initState();
    eventBus.stringEventBus.on().listen((event) {
      setState(() {
        // 在这里处理事件
        print('Received message: ${event.message}');
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text('Listening for events...');
  }

  @override
  void dispose() {
    eventBus.stringEventBus.off(); // 取消订阅事件
    super.dispose();
  }
}

6. 使用监听组件

最后,在你的主应用中使用监听组件:

// main.dart (完整代码)
import 'package:flutter/material.dart';
import 'event_bus.dart';
import 'event.dart';
import 'listener_widget.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Typed Event Bus Demo'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: MyHomePage(),
            ),
            SizedBox(height: 20),
            ListenerWidget(), // 使用监听组件
          ],
        ),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final EventBus eventBus = EventBus();

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        eventBus.stringEventBus.fire(StringMessageEvent('Hello, Event Bus!'));
      },
      child: Text('Fire Event'),
    );
  }
}

这样,当你点击按钮时,事件会被发布到事件总线上,而ListenerWidget组件会监听并处理这个事件,打印出接收到的消息。

这个示例展示了如何使用typed_event_bus插件在Flutter应用中实现事件总线机制。通过这种方式,你可以在不同组件之间高效地传递事件和数据。

回到顶部