Flutter事件总线插件atom_event_bus的使用

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

Flutter事件总线插件atom_event_bus的使用

简介

Atom Event Bus 是一个基于发布/订阅模式的事件总线，使用 dart 的 Stream 来解耦代码依赖。

特点

  • 每个应用实例只有一个事件总线。
  • 可以在任何地方订阅事件。
  • 支持 debounce 和 oneOff 监听器。
  • 使用 dart 流。

图解

图解

开始使用

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
    
  # 其他依赖
  atom_event_bus:

使用步骤

  1. 创建事件。
  2. 通过 EventRule 订阅事件。
  3. 使用 EventBus.emit 发射事件。

示例代码

events.dart

// 创建一个事件
final signInEvent = Event<bool>("SIGN_IN_EVENT");

subscriber.dart

class SignedInStatus extends StatefulWidget {
  const SignedInStatus({Key? key}) : super(key: key);

  @override
  _SignedInStatusState createState() => _SignedInStatusState();
}

class _SignedInStatusState extends State<SignedInStatus> {
  bool signedIn = false;
  late EventRule signInRule;

  @override
  void initState() {
    super.initState();

    // 订阅事件
    signInRule = EventRule<bool>(signInEvent, targets: [
      EventListener(onSignInEvent),
    ]);
  }

  void onSignInEvent(bool status) {
    setState(() {
      signedIn = status;
    });
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context).textTheme;

    return Center(
      child: Text(
        "Is Signed In? \n${signedIn ? 'Yes' : 'No'}",
        textAlign: TextAlign.center,
        style: theme.headline1,
      ),
    );
  }

  @override
  void dispose() {
    signInRule.cancel(); // 取消订阅
    super.dispose();
  }
}

emitter.dart

class ToggleSignInStatus extends StatelessWidget {
  const ToggleSignInStatus({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: () {
        // 发射事件
        EventBus.emit(signInEvent.createPayload(true));
      },
      child: const Icon(Icons.replay_outlined),
    );
  }
}

main.dart

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ATOM EVENT BUS',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(title: 'ATOM EVENT BUS'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        centerTitle: true,
      ),
      body: const SignedInStatus(), // 订阅事件
      floatingActionButton: const ToggleSignInStatus(), // 发射事件
    );
  }
}

监听器

  • EventListener：常规事件监听器，每次事件触发时都会执行。
  • OneOffEventListener：只触发一次的事件监听器。
  • DebouncedEventListener：防抖事件监听器，防止频繁事件触发，仅捕获最后一次事件。

额外信息

了解更多关于发布/订阅模式的信息可以查看 维基百科。


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

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用atom_event_bus插件的简单示例。atom_event_bus是一个轻量级的事件总线库，用于在不同组件或页面之间传递事件和数据。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加atom_event_bus的依赖：

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

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

2. 创建一个事件类

通常你会创建一个事件类来封装你要传递的数据。例如：

class CounterEvent {
  final int count;

  CounterEvent({required this.count});
}

3. 设置事件总线

在你的应用中设置全局的事件总线实例。你可以在顶层创建一个单例类来管理它：

import 'package:atom_event_bus/atom_event_bus.dart';

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

  factory EventBusProvider() => _instance;

  EventBus _eventBus = EventBus();

  EventBus get eventBus => _eventBus;

  EventBusProvider._internal();
}

4. 监听事件

在你的组件或页面中监听事件。例如，在一个StatefulWidget中：

import 'package:flutter/material.dart';
import 'package:your_app/event_bus_provider.dart'; // 导入你创建的单例类
import 'package:your_app/counter_event.dart'; // 导入你创建的事件类

class ListenerPage extends StatefulWidget {
  @override
  _ListenerPageState createState() => _ListenerPageState();
}

class _ListenerPageState extends State<ListenerPage> {
  int _count = 0;

  @override
  void initState() {
    super.initState();
    EventBusProvider().eventBus.on<CounterEvent>().listen((event) {
      setState(() {
        _count = event.count;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Listener Page')),
      body: Center(
        child: Text('Current Count: $_count'),
      ),
    );
  }
}

5. 触发事件

在需要触发事件的地方，比如另一个页面或组件中：

import 'package:flutter/material.dart';
import 'package:your_app/event_bus_provider.dart'; // 导入你创建的单例类
import 'package:your_app/counter_event.dart'; // 导入你创建的事件类

class EmitterPage extends StatefulWidget {
  @override
  _EmitterPageState createState() => _EmitterPageState();
}

class _EmitterPageState extends State<EmitterPage> {
  int _count = 0;

  void _incrementCounter() {
    _count++;
    EventBusProvider().eventBus.fire(CounterEvent(count: _count));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Emitter Page')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times: $_count'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

6. 运行应用

确保你已经正确设置了路由，以便可以在两个页面之间导航。这样，当你在EmitterPage上点击按钮时，ListenerPage上的计数器就会更新。

这个示例展示了如何使用atom_event_bus在Flutter应用中实现事件总线机制。根据实际需求，你可以扩展和修改这个基本结构。

回到顶部