Flutter事件分发管理插件event_dispatcher_builder的使用

Flutter事件分发管理插件event_dispatcher_builder的使用

Event Dispatcher

一个用于Dart的事件分发器。

安装

请遵循以下页面上的步骤:

  1. pubspec.yaml文件中添加event_dispatcher_builder依赖。
  2. 运行flutter pub get来安装依赖。
  3. 安装build_runner包。
dependencies:
  event_dispatcher_builder: ^版本号

dev_dependencies:
  build_runner: ^版本号

配置

为了自定义构建器,需要在pubspec.yaml旁边创建一个build.yaml文件,内容如下:

targets:
  $default:
    auto_apply_builders: true
    builders:
      event_dispatcher_builder|buildEventDispatcher:
        options:
          eventDispatcherClassName: 'DefaultEventDispatcher' # 类名
          includePackageDependencies: false # 是否包含依赖中的订阅者

注解

@Subscribe()

此注解应用于方法。它告诉生成器该方法处理特定事件。该方法必须有一个事件类型的参数。

// 事件
class TestEvent {
  final String name;

  TestEvent({
    required this.name,
  });
}

class FakeHandler {
  List<String> eventTexts = [];

  // 监听事件的方法
  @Subscribe()
  void onTestEvent(TestEvent event) {
    eventTexts.add(event.name);
  }
}

[@GenerateEventDispatcher](/user/GenerateEventDispatcher)()

此注解应在应用程序入口点处仅出现一次。它用于生成包含事件分发器的输出文件。

使用

在用@Subscribe注解标记事件订阅者方法,并在main函数中添加[@GenerateEventDispatcher](/user/GenerateEventDispatcher)()注解后,需要运行dart run build_runner buildflutter pub run build_runner build

你应该在添加注解的文件旁边找到一个名为*.event_dispatcher_builder.g.dart的新文件。

void main() {
  // 类名取决于你的配置
  var eventDispatcher = DefaultEventDispatcher();

  eventDispatcher.addHandler(FakeHandler());
}

要分发事件,可以使用EventDispatcher.dispatch(event)方法。

void main() {
  var eventDispatcher = DefaultEventDispatcher();

  eventDispatcher.addHandler(FakeHandler());

  // 分发新事件
  var event = TestEvent(name: 'Foo Bar');
  eventDispatcher.dispatch(event);
}

自动化addHandler

在大型项目中,管理所有addHandler可能会很繁琐。特别是如果事件处理器需要额外的服务。

为了优化这一点,你可以安装catalyst_builder包,该包会生成一个依赖注入容器。

安装并配置后,你可以创建一个HandlerRegistry类,它被预加载,并添加上述代码:

@Service()
@Preload()
class HandlerRegistry {

  HandlerRegistry(
    EventDispatcher dispatcher,
    @Inject(tag: #eventListener) List<Object> listeners,
  ) {

    for (var listener in listeners) {
      dispatcher.addHandler(listener, listener.runtimeType);
    }

  }
}

你的事件订阅者类需要一个新的注解:

@Service(tags: [#eventListener])
class FakeHandler {
  List<String> eventTexts = [];

  @Subscribe()
  void onTestEvent(TestEvent event) {
    eventTexts.add(event.name);
  }
}

最后,你需要更新main注解:

[@GenerateEventDispatcher](/user/GenerateEventDispatcher)()
// 新
[@GenerateServiceProvider](/user/GenerateServiceProvider)()
[@ServiceMap](/user/ServiceMap)(services: {
  // 在服务容器中注册事件分发器作为EventDispatcher
  MyEventDispatcher: Service(
    lifetime: ServiceLifetime.singleton,
    exposeAs: EventDispatcher,
  )
})
void main(List<String> arguments) {
  // 加载提供者
  var provider = DefaultServiceProvider();
  // 启动
  provider.boot();

  // 获取事件分发器
  var dispatcher = provider.resolve<EventDispatcher>();

  // 分发事件
  var event = TestEvent(name: 'Foo Bar');
  dispatcher.dispatch(event);
}

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

1 回复

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


当然,以下是一个关于如何使用Flutter事件分发管理插件event_dispatcher_builder的代码案例。这个插件允许你创建和管理全局事件分发,非常适合需要在多个组件或页面间传递事件的场景。

首先,确保你已经在pubspec.yaml文件中添加了event_dispatcher_builder依赖:

dependencies:
  flutter:
    sdk: flutter
  event_dispatcher_builder: ^最新版本号 # 请替换为最新的版本号

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

接下来,我们来看如何使用这个插件。假设我们有一个全局事件,当某个按钮被点击时,我们希望触发这个事件,并在另一个组件中监听这个事件。

1. 创建事件类

首先,定义一个事件类。例如,我们定义一个简单的CustomEvent类:

class CustomEvent {
  final String message;

  CustomEvent({required this.message});
}

2. 设置全局事件分发器

在你的应用的主文件(通常是main.dart)中,设置全局事件分发器:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return EventDispatcherBuilder(
      builder: (context, dispatcher) {
        return MaterialApp(
          title: 'Flutter Event Dispatcher Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(dispatcher: dispatcher),
        );
      },
    );
  }
}

3. 触发事件

在需要触发事件的组件中,使用EventDispatcher来触发事件。例如,在MyHomePage中:

import 'package:flutter/material.dart';
import 'package:event_dispatcher_builder/event_dispatcher_builder.dart';
import 'custom_event.dart';

class MyHomePage extends StatelessWidget {
  final EventDispatcher dispatcher;

  MyHomePage({required this.dispatcher});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Event Dispatcher Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            CustomEvent event = CustomEvent(message: "Hello, Event!");
            dispatcher.fire(event);
          },
          child: Text('Trigger Event'),
        ),
      ),
    );
  }
}

4. 监听事件

在需要监听事件的组件中,使用EventDispatcherProviderEventDispatcherConsumer来监听事件。例如,在一个新的页面EventListenerPage中:

import 'package:flutter/material.dart';
import 'package:event_dispatcher_builder/event_dispatcher_builder.dart';
import 'custom_event.dart';

class EventListenerPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Event Listener Page'),
      ),
      body: EventDispatcherProvider(
        create: (context) => EventDispatcher(), // 这里不需要实际的创建,因为我们已经在MyApp中创建了
        child: EventDispatcherConsumer<CustomEvent>(
          builder: (context, dispatcher, event, child) {
            if (event != null) {
              return Center(
                child: Text('Received Event: ${event.message}'),
              );
            } else {
              return Center(
                child: Text('No Event Received Yet'),
              );
            }
          },
        ),
      ),
    );
  }
}

注意:在上面的EventListenerPage示例中,我们实际上并不需要重新创建一个EventDispatcher实例,因为我们已经在MyApp中创建了全局的实例。这里的create只是为了展示EventDispatcherProvider的用法,实际使用中你可以忽略它或者传递一个空的构造函数。

为了简化,你可以使用GlobalKey或者路由来导航到EventListenerPage,并在那里监听事件。由于EventDispatcher是全局的,因此在任何页面或组件中都可以触发和监听事件。

希望这个示例能帮助你理解如何使用event_dispatcher_builder插件进行事件分发管理。如果有进一步的问题,欢迎继续讨论!

回到顶部