Flutter事件处理插件event_object的使用

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

Flutter事件处理插件event_object的使用

该插件可以帮助你创建和管理事件,通过创建带有负载的事件对象来触发事件。

使用

import 'package:event_object/event_object.dart';

示例

示例1:使用Event.historyLimit控制历史模式

void main() {
  // 设置[historyLimit]为0以启用具有无限负载的历史模式
  final event = Event<String>(name: 'event', historyLimit: 0);

  print('添加监听器1');
  event.addListener((payload) {
    print('事件监听器1: $payload');
  });

  print('触发负载1');
  event.fire('负载1');

  print('触发负载2');
  event.fire('负载2');

  print('添加监听器2');
  event.addListener((payload) {
    print('事件监听器2: $payload');
  });

  print('触发负载3');
  event.fire('负载3');

  print('添加监听器3');
  event.addListener((payload) {
    print('事件监听器3: $payload');
  });
}

结果:

添加监听器1
触发负载1
事件监听器1: 负载1

触发负载2
事件监听器1: 负载2

添加监听器2
事件监听器2: 负载1
事件监听器2: 负载2

触发负载3
事件监听器1: 负载3
事件监听器2: 负载3

添加监听器3
事件监听器3: 负载1
事件监听器3: 负载2
事件监听器3: 负载3

示例2:使用Event.linkTo方法

此方法在将一种类型的负载转换为另一种类型时非常有用。

void main() {
  final event1 = Event<int>(name: 'event1');
  final event2 = Event<String>(name: 'event2');

  // 为第一个事件添加监听器
  event1.addListener((payload) {
    print('事件1监听器: $payload, 类型: ${payload.runtimeType}');
  });

  // 为第二个事件添加监听器
  event2.addListener((payload) {
    print('事件2监听器: $payload, 类型: ${payload.runtimeType}');
  });

  // 将字符串类型的负载转换为整数类型
  event1.linkTo<String>(event2, (payload) => payload.toString());

  event1.fire(5); // 触发事件1,负载为5
}

结果:

事件1监听器: 5, 类型: int
事件1监听器: 5, 类型: String

示例3:使用Event.notify和Event.onNext方法创建通知事件并延迟通知

void main() async {
  final event = Event(); // 负载类型为动态

  // 因为负载类型是动态的,所以可以使用[Event.notify]方法
  event.notify(Duration(seconds: 5)); // 5秒后触发

  print('等待通知...');

  // 注意:触发的负载值为null
  await event.onNext(); // 等待触发的负载

  print('通知已接收');
}

结果:

等待通知...
通知已接收 // 5秒后

示例4:使用Event创建响应式变量

void main() async {
  // 设置[historyLimit]为1以只保存最新值
  final name = Event<String>(name: 'name', historyLimit: 1);

  // 设置silent为true以防止初始值调用监听器
  name.fire('John', silent: true);

  // 添加监听器以在值更改时被调用
  name.addListener((payload) {
    print('名称更改为$payload');
  });

  name.fire('Doe'); // 设置值为'Doe'

  // 5秒后设置值为'John Doe'
  name.fire('John Doe', delay: Duration(seconds: 5));

  // 忽略一次触发
  final newName = await name.onNext(1); // 忽略'Doe'并等待'John Doe'

  print('新名称为$newName');
}

结果:

名称更改为Doe
名称更改为John Doe // 5秒后
新名称为John Doe

示例5:使用EventComponent类和类型化监听器

这是一个模拟会话对象的例子,它可以启动、接收消息并结束。

首先定义抽象事件类型:

abstract class SessionEvent {
  const SessionEvent();
}

接着扩展SessionEvent并创建startend事件:

class OnStartSessionEvent extends SessionEvent {
  const OnStartSessionEvent();
}

class OnEndSessionEvent extends SessionEvent {
  const OnEndSessionEvent();
}

再添加OnEndSessionEvent的子类:

class OnErrorEndSessionEvent extends OnEndSessionEvent {
  const OnErrorEndSessionEvent();
}

创建一个处理消息的事件:

class OnMessageSessionEvent extends SessionEvent {
  const OnMessageSessionEvent(this.message);
  final String message;
}

修改SessionEvent类以定义一些事件别名:

abstract class SessionEvent {
  const SessionEvent();

  const factory SessionEvent.start() = OnStartSessionEvent;
  const factory SessionEvent.onMessage(String message) = OnMessageSessionEvent;
  const factory SessionEvent.errorEnd() = OnErrorEndSessionEvent;
  const factory SessionEvent.end() = OnEndSessionEvent;
}

接下来定义会话类:

class Session extends EventComponent<SessionEvent> {
  Session() : super(name: 'session_event');

  void start() {
    fire(const SessionEvent.start());
  }

  void receiveMessage(String message) {
    fire(SessionEvent.onMessage(message));
  }

  void end() {
    fire(const SessionEvent.end());
  }
}

最后使用它:

void main() {
  final session = Session();

  // 处理会话事件
  session.onType<OnStartSessionEvent>((_) => print('会话开始'));

  // `OnErrorEndSessionEvent` 是 `OnEndSessionEvent` 的子类
  // 若要仅监听 `OnEndSessionEvent`,将 `useRuntimeType` 设为 true
  // 默认情况下 `useRuntimeType` 为 false,表示我们同时监听 `OnEndSessionEvent` 和 `OnErrorEndSessionEvent`
  session.onType<OnEndSessionEvent>(
    (_) => print('会话结束'),
    useRuntimeType: true,
  );

  // 尝试触发 `OnErrorEndSessionEvent`
  session.fire(SessionEvent.errorEnd());

  session.onType<OnMessageSessionEvent>(
    (payload) => print('收到消息: ${payload.message}'),
  );

  // 启动会话
  session.start();

  // 接收消息
  session.receiveMessage('hello world');

  // 结束会话
  session.end();
}

结果:

会话开始
收到消息: hello world
会话结束

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

1 回复

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


在Flutter中,event_object 插件(尽管这不是一个官方或广泛认知的插件名称,我假设这是一个自定义的或第三方的事件处理库)可以用于管理和处理应用中的事件。为了展示如何使用一个类似 event_object 的事件处理机制,我将创建一个简单的示例,演示如何在Flutter应用中实现事件监听和触发。

请注意,以下代码是一个概念性示例,旨在展示事件处理的基本结构。如果你使用的是特定的 event_object 插件,请查阅其官方文档以获取准确的实现细节。

1. 创建事件类

首先,定义一个事件类,用于封装事件数据。

class CustomEvent {
  final String message;

  CustomEvent({required this.message});
}

2. 创建事件管理器

接下来,创建一个事件管理器,用于注册事件监听器和触发事件。

import 'dart:async';

class EventManager {
  final _controllers = <Type, StreamController<dynamic>>{};

  // 注册事件监听器
  StreamSubscription<T> listenTo<T>(void Function(T event) onData, {bool cancelOnError = false}) {
    final controller = _getController<T>();
    return controller.stream.listen(onData, cancelOnError: cancelOnError);
  }

  // 触发事件
  void fire<T>(T event) {
    final controller = _getController<T>();
    controller.add(event);
  }

  // 获取或创建StreamController
  StreamController<T> _getController<T>() {
    return _controllers.putIfAbsent(T, () => StreamController<T>.broadcast());
  }
}

3. 使用事件管理器

现在,我们可以在Flutter应用中使用事件管理器来处理事件。

import 'package:flutter/material.dart';

void main() {
  final eventManager = EventManager();

  runApp(MyApp(eventManager: eventManager));
}

class MyApp extends StatelessWidget {
  final EventManager eventManager;

  MyApp({required this.eventManager});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Event Handling Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  eventManager.fire(CustomEvent(message: 'Hello, Flutter!'));
                },
                child: Text('Fire Event'),
              ),
              Text(
                'Event Message: ',
                style: TextStyle(fontSize: 20),
              ),
              Text(
                _eventMessage, // This will be updated by the event listener
                style: TextStyle(fontSize: 20, color: Colors.red),
              ),
            ],
          ),
        ),
      ),
    );
  }

  String _eventMessage = '';

  @override
  void initState() {
    super.initState();
    // 监听事件
    eventManager.listenTo<CustomEvent>((event) {
      setState(() {
        _eventMessage = event.message;
      });
    });
  }
}

解释

  1. CustomEvent 类:封装事件数据。
  2. EventManager 类:管理事件的注册和触发。
  3. MyApp 类:Flutter 应用的主入口,展示如何使用 EventManager 来监听和响应事件。

在这个示例中,当用户点击按钮时,会触发一个 CustomEvent 事件,事件管理器捕获该事件并通过监听器更新UI。

如果你正在使用特定的 event_object 插件,请参考其文档以获取具体的API和使用方法,但上述代码提供了一个基本的事件处理框架,可以在Flutter应用中实现类似功能。

回到顶部