Flutter事件分发插件event_taxi的使用

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

Flutter事件分发插件event_taxi的使用

模式 (Pattern)

EventBus遵循发布/订阅模式。它允许监听者订阅事件,发布者触发事件。这使得对象可以在不需要显式定义监听者并跟踪它们的情况下进行交互。

在Flutter应用或Angular Web应用中的Event Taxi

这个EventBus非常适合解耦不同的层。除了标准功能外,它还提供了一些在产品中使用的附加小功能。

使用方法 (Usage)

1. 创建Event Taxi 🚕

首先,我们需要创建一个EventTaxi实例:

import 'package:event_taxi/event_taxi.dart';

// 新实例
EventTaxi eventTaxi = EventTaxiImpl();

// 如果需要单例实例
EventTaxi eventTaxi = EventTaxiImpl.singleton();

注意: EventTaxi始终是一个单例。

2. 定义事件 📦

每个事件都必须是Event的子类。这些类可以持有额外的信息(如果需要):

class RefreshDataEvent implements Event {
  // 额外信息
  final DateTime requestTime;
  final String fetchedJson;

  RefreshDataEvent({required this.requestTime, required this.fetchedJson});
}

3. 注册监听器 🎧

简单调用register来获取事件流。true会创建一个立即发出最后一个事件的流(类似于RxDart中的BehaviorSubject):

eventTaxi.registerTo<RefreshDataEvent>(true).listen((event) {
    // 处理事件
    print("Received data: ${event.fetchedJson}");
});

4. 触发事件 🔥

创建你的事件类实例,并使用fire方法:

var event = RefreshDataEvent(
  requestTime: DateTime.now(),
  fetchedJson: '{"data": "some_data"}'
);
eventTaxi.fire(event);

示例代码

以下是一个完整的示例演示如何使用EventTaxi

import 'package:event_taxi/event_taxi.dart';

class TodoCreated implements Event {
  final String name;
  final String description;

  TodoCreated({required this.name, required this.description});
}

class UserLoggedIn implements Event {
  final String username;

  UserLoggedIn({required this.username});
}

void main() {
  EventTaxi eventBus = EventTaxiImpl();

  // 注册TodoCreated事件监听器
  eventBus.registerTo<TodoCreated>().listen((event) {
    // 处理事件
    print("Todo created: name=${event.name}, description=${event.description}");
  });

  // 触发TodoCreated事件
  eventBus.fire(TodoCreated(
      name: "Create example",
      description: "Add example for this cool library called EventTaxi 🚕."));

  // 触发UserLoggedIn事件
  eventBus.fire(UserLoggedIn(username: "Stefan"));

  // 注册UserLoggedIn事件监听器,并立即接收上一个事件
  eventBus.registerTo<UserLoggedIn>(true).listen((event) {
    // 打印 "Stefan" 和 "Tobi"
    print("User logged in: ${event.username}");
  });

  // 再次触发UserLoggedIn事件
  eventBus.fire(UserLoggedIn(username: "Tobi"));
}

许可证 (License)

Apache License Version 2.0(请查看此存储库中的LICENCE文件)

功能和错误 (Features and bugs)

请在问题跟踪器上提交功能请求和错误。


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

1 回复

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


当然,下面是一个关于如何在Flutter中使用event_taxi插件进行事件分发的代码示例。event_taxi是一个轻量级的事件总线库,用于在Flutter应用中实现事件分发机制。

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

dependencies:
  flutter:
    sdk: flutter
  event_taxi: ^3.0.0  # 请检查最新版本号

然后运行flutter pub get来获取依赖。

事件类定义

首先,你需要定义一个事件类。这个类可以是任何你希望传递的数据结构。例如:

class MyCustomEvent {
  final String message;

  MyCustomEvent({required this.message});
}

设置EventTaxi

在你的应用中,你需要设置EventTaxi。通常,这可以在应用的入口点(例如main.dart)中进行。

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

void main() {
  // 初始化EventTaxi
  EventTaxi eventTaxi = EventTaxi();

  // 注册事件监听器
  eventTaxi.register<MyCustomEvent>((event) {
    print('Received event: ${event.message}');
  });

  runApp(MyApp(eventTaxi: eventTaxi));
}

class MyApp extends StatelessWidget {
  final EventTaxi eventTaxi;

  MyApp({required this.eventTaxi});

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

触发事件

在你的组件中,你可以通过EventTaxi实例来触发事件。例如:

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

class MyHomePage extends StatelessWidget {
  final EventTaxi eventTaxi;

  MyHomePage({required this.eventTaxi});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('EventTaxi Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 触发事件
            MyCustomEvent event = MyCustomEvent(message: 'Hello, EventTaxi!');
            eventTaxi.fire(event);
          },
          child: Text('Fire Event'),
        ),
      ),
    );
  }
}

完整代码示例

为了完整性,这里是所有代码放在一起的样子:

pubspec.yaml

name: flutter_event_taxi_demo
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  event_taxi: ^3.0.0  # 请检查最新版本号

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

my_custom_event.dart

class MyCustomEvent {
  final String message;

  MyCustomEvent({required this.message});
}

main.dart

import 'package:flutter/material.dart';
import 'package:event_taxi/event_taxi.dart';
import 'my_custom_event.dart';

void main() {
  EventTaxi eventTaxi = EventTaxi();

  eventTaxi.register<MyCustomEvent>((event) {
    print('Received event: ${event.message}');
  });

  runApp(MyApp(eventTaxi: eventTaxi));
}

class MyApp extends StatelessWidget {
  final EventTaxi eventTaxi;

  MyApp({required this.eventTaxi});

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

class MyHomePage extends StatelessWidget {
  final EventTaxi eventTaxi;

  MyHomePage({required this.eventTaxi});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('EventTaxi Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            MyCustomEvent event = MyCustomEvent(message: 'Hello, EventTaxi!');
            eventTaxi.fire(event);
          },
          child: Text('Fire Event'),
        ),
      ),
    );
  }
}

这样,你就成功地在Flutter应用中使用了event_taxi插件来实现事件分发机制。当按钮被点击时,事件会被触发,并且注册的监听器会接收到该事件并处理。

回到顶部