Flutter事件总线插件zam_event_bus_provider的使用

在Flutter中，zam_event_bus_provider 是一个用于传递 EventBus 的 Provider 插件。它扩展了 zam_event_bus 包的功能，使开发者能够更方便地通过上下文（Context）分发和监听事件。

包含的核心组件

该包包含以下核心组件：

• EventBusProvider：用于将 EventBus 提供给所有子部件。

使用步骤

第一步：创建一个 EventBus

final bus = EventBus(transformers);

EventBus 来自 zam_event_bus 包。

第二步：提供 EventBus

final app = EventBusProvider(
  bus: bus,
  child: MaterialApp(
    home: MyHomePage(title: 'Event Bus Demo'),
  ),
);
runApp(app);

在 MaterialApp 前添加 EventBusProvider，以便其对所有路由可用。

第三步：通过上下文分发事件

FloatingActionButton(
  onPressed: () => context.dispatch(IncrementEvent()),
  tooltip: 'Increment',
  child: const Icon(Icons.add),
),

第四步：通过 View 或 StreamBuilder 监听数据

使用 View 组件

View<Counter>(
  builder: (data) => Text(
    data.value.toString(),
    style: Theme.of(context).textTheme.headline4,
  ),
)

使用 StreamBuilder

StreamBuilder<Counter>(
  initialData: context.fetch<Counter>(),
  stream: context.select<Counter>(),
  builder: (context, snapshot) {
    final counterText = snapshot.data!.value.toString();
    return Text(
      counterText,
      style: Theme.of(context).textTheme.headline4,
    );
  },
)

或者通过继承 DataWidget

class CounterText extends DataWidget<Counter> {
  [@override](/user/override)
  Widget buildUsingData(BuildContext context, Counter data) {
    return Text(
      'Inheritance: ${data.value.toString()}',
      style: Theme.of(context).textTheme.headline4,
    );
  }
}

完整示例代码

以下是完整的示例代码，展示如何使用 zam_event_bus_provider 插件。

import 'package:flutter/material.dart';
import 'package:zam_event_bus_provider/zam_event_bus_provider.dart';
import 'package:zam_event_bus/zam_event_bus.dart';

// 定义领域模型
class Counter {
  final int value;

  const Counter([this.value = 0]);

  Counter increment() => Counter(value + 1);
}

// 定义事件
class IncrementEvent {}

// 定义事件处理器
class IncrementUseCase extends SavingEventTransformer<IncrementEvent, Counter> {
  [@override](/user/override)
  Counter execute(IncrementEvent event, EventBus bus) {
    final currentCounter = bus.selectFromStore<Counter>();
    final newCounter = currentCounter.increment();
    return newCounter;
  }
}

void main() {
  // 创建 EventBus 并设置事件处理器
  final transformers = [IncrementUseCase()];
  final bus = EventBus(transformers);

  // 初始化初始数据
  bus.save(const Counter());

  // 将 EventBus 提供给应用
  runApp(MyApp(bus));
}

class MyApp extends StatelessWidget {
  final EventBus bus;

  const MyApp(this.bus, {Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EventBusProvider(
      bus: bus,
      child: const MaterialApp(
        home: HomePage(title: 'Event Bus Demo'),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  final String title;

  const HomePage({Key? key, required this.title}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示计数器文本
            const Text('你点击按钮的次数为：'),
            // 使用继承的方式监听数据
            const CounterText(),
            // 使用组合的方式监听数据
            View<Counter>(
              builder: (data) => Text(
                '组合方式: ${data.value.toString()}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.dispatch(IncrementEvent()),
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

// 继承 DataWidget 来监听数据
class CounterText extends DataWidget<Counter> {
  const CounterText({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget buildUsingData(BuildContext context, Counter data) {
    return Text(
      '继承方式: ${data.value.toString()}',
      style: Theme.of(context).textTheme.headline4,
    );
  }
}