Flutter事件发射插件events_emitter的使用

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

Flutter事件发射插件events_emitter的使用

简介

events_emitter 是一个基于事件的系统,高度借鉴了 NodeJS 的 Event Emitter,该实现使用泛型类型以允许多种数据类型的同时非常直观。它基于 JavaScript,并且适用于 Dart 和 Flutter,具有类型安全特性。

Pub.dev package GitHub EventEmitter-dart

特性

  • 为事件发射器附加多个监听器。
  • 监听具有特定 事件类型数据类型 的事件。
  • 发射特定类型的事件以广播给所有监听器。
  • 类型安全,只有正确类型的数据会被传递。
  • 使用回调与 EventEmitter 交互。
  • 使用流与 StreamEventEmitter 交互。
  • 可扩展以创建自定义事件发射器和事件。
  • 自定义事件可以包含用于监听器中的自定义数据。

入门指南

安装

使用 pub 安装:

dart pub add events_emitter

导入包

在 Dart 文件中导入:

import 'package:events_emitter/events_emitter.dart';

使用方法

以下是一个简单的示例,展示了如何使用 events_emitter

void main() {
  final events = EventEmitter();

  // 添加监听器
  events.on('message', (String data) => print('String: $data'));
  events.on('message', (int data) => print('Integer: $data'));

  // 触发事件
  events.emit('message', 'Hello World');
  events.emit('message', 42);

  // 输出结果
  // String: Hello World
  // Integer: 42
}

移除监听器

可以通过订阅来移除特定的监听器:

final listener = events.on('message', (String data) => print('String: $data'));
listener.cancel();

也可以通过指定 事件类型数据类型回调 来移除监听器:

// 移除所有监听器
events.off();

// 移除数据类型为 `String` 的监听器
events.off<String>();

// 移除事件类型为 `message` 的监听器
events.off(type: 'message');

// 移除事件类型为 `message` 且数据类型为 `String` 的监听器
events.off<String>(type: 'message');

监听器属性

监听器可以设置一些属性以改变其行为:

  • once: 如果设置为 true,监听器在第一次调用后将被移除。
  • protected: 如果设置为 true,监听器将不会被 events.off() 移除。

还可以添加回调到监听器:

  • onAdd: 当监听器被添加到事件发射器时调用。
  • onRemove: 当监听器从事件发射器中移除时调用。
  • onCall: 当监听器被调用时调用。
  • onCancel: 当监听器被取消时调用。

示例如下:

final events = EventEmitter();

final listener = EventListener(
  'message',
  (String data) => print(data),
  
  once: false,
  protected: false,

  onAdd: (emitter) => print('Added to emitter'),
  onRemove: (emitter) => print('Removed from emitter'),
  onCall: (data) => print('Called with data: $data'),
  onCancel: () => print('Listener canceled'),
);

events.addEventListener(listener);
listener.cancel();

扩展示例

下面是一个更复杂的例子,展示如何继承 EventEmitter 创建自定义事件发射器:

import 'package:events_emitter/events_emitter.dart';

class Person extends EventEmitter {
  String name;

  Person(this.name);

  void say(String message) => emit('say', message);
  void eat(String food) => emit('eat', food);
  void jump(double height) => emit('jump', height);
}

void main() {
  final person = Person('John');

  person.on('say', (String message) => print('${person.name} said: $message'));
  person.on('eat', (String food) => print('${person.name} ate $food'));
  person.on('jump', (double height) => print('${person.name} jumped $height meters'));

  person.say('I\'m a human!');
  person.eat('apple');
  person.jump(0.5);

  // 输出结果
  // John said: I'm a human!
  // John ate apple
  // John jumped 0.5 meters
}

更多示例可以在 GitHub 仓库 中找到,包括:

希望这些信息对您有所帮助!如果您有任何问题或需要进一步的帮助,请随时提问。


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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用events_emitter插件的示例代码。events_emitter是一个用于事件发射和监听的插件,非常适合在Flutter应用中处理组件间的通信。

1. 添加依赖

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

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

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

2. 导入插件

在你的Dart文件中导入events_emitter

import 'package:events_emitter/events_emitter.dart';

3. 创建事件发射器

你可以创建一个全局的事件发射器实例,或者根据需要创建局部实例。以下是一个全局实例的示例:

class MyApp extends StatelessWidget {
  static final EventEmitter emitter = EventEmitter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

4. 发射事件

你可以在应用的任何地方发射事件。例如,在一个按钮点击事件中:

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Event Emitter Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            MyApp.emitter.emit('customEvent', {'key': 'value'});
          },
          child: Text('Emit Event'),
        ),
      ),
    );
  }
}

5. 监听事件

你可以在组件的生命周期中监听事件。例如,在initState中监听事件,并在dispose中取消监听:

class EventListenerWidget extends StatefulWidget {
  @override
  _EventListenerWidgetState createState() => _EventListenerWidgetState();
}

class _EventListenerWidgetState extends State<EventListenerWidget> {
  @override
  void initState() {
    super.initState();
    MyApp.emitter.on('customEvent', (event, args) {
      print('Event received: $event with args $args');
    });
  }

  @override
  void dispose() {
    MyApp.emitter.off('customEvent');
    super.dispose();
  }

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

6. 完整示例

将上述代码片段整合到一个完整的Flutter应用中:

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

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

class MyApp extends StatelessWidget {
  static final EventEmitter emitter = EventEmitter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Event Emitter Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                MyApp.emitter.emit('customEvent', {'key': 'value'});
              },
              child: Text('Emit Event'),
            ),
            SizedBox(height: 20),
            EventListenerWidget(),
          ],
        ),
      ),
    );
  }
}

class EventListenerWidget extends StatefulWidget {
  @override
  _EventListenerWidgetState createState() => _EventListenerWidgetState();
}

class _EventListenerWidgetState extends State<EventListenerWidget> {
  @override
  void initState() {
    super.initState();
    MyApp.emitter.on('customEvent', (event, args) {
      print('Event received: $event with args $args');
    });
  }

  @override
  void dispose() {
    MyApp.emitter.off('customEvent');
    super.dispose();
  }

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

这个示例展示了如何在Flutter应用中使用events_emitter插件来发射和监听事件。希望这对你有帮助!

回到顶部