Flutter事件通知插件dart_event_notifier的使用

Flutter事件通知插件dart_event_notifier的使用

这是一个非常简单的Dart包，用于为您的对象添加可观察性。它不依赖于Flutter，因此可以在Dart脚本或服务器端使用。它类似于Flutter的ChangeNotifier，bloc等。

其核心思想是我们的对象将通知它们内部发生的有意义的事件。

使用

完整的示例请参见dart_event_notifier_example.dart。

首先定义对象中可能发生的事件。密封类和枚举非常适合此用途。

sealed class CounterEvent {
  const CounterEvent();
}

final class Incremented extends CounterEvent {
  const Incremented();
}

final class Decremented extends CounterEvent {
  const Decremented();
}

然后编写逻辑。混合使用EventNotifier并在需要通知的重要事件上使用notify方法！

class Counter with EventNotifier<CounterEvent> {
  var _value = 0;
  int get value => _value;

  void increment() {
    _value++;
    notify(Incremented()); // 通知Incremented事件
  }

  void decrement() {
    _value--;
    notify(Decremented()); // 通知Decremented事件
  }
}

要接收这些事件，只需监听events流即可。非常简单。

void main() {
  final counter = Counter();

  counter.events.listen((event) {
    print('Received event: $event; current value: ${counter.value}');
  });
}

完整示例

以下是一个完整的示例，展示了如何使用dart_event_notifier插件。

import 'package:dart_event_notifier/dart_event_notifier.dart';

// 定义事件
sealed class CounterEvent {
  const CounterEvent();
}

final class Incremented extends CounterEvent {
  const Incremented();
}

final class Decremented extends CounterEvent {
  const Decremented();
}

// 混合EventNotifier并实现业务逻辑
class Counter with EventNotifier<CounterEvent> {
  var _value = 0;
  int get value => _value;

  void increment() {
    _value++;
    notify(Incremented()); // 通知Incremented事件
  }

  void decrement() {
    _value--;
    notify(Decremented()); // 通知Decremented事件
  }
}

// 主函数
Future<void> main() async {
  final counter = Counter();

  // 监听事件
  counter.events.listen((event) {
    print('Received event: $event; current value: ${counter.value}');
  });

  // 这将打印两次：一次是Incremented事件，一次是Decremented事件。在两种情况下，值都是0，因为流回调是异步的，而计数器已同步地递增和递减。
  counter
    ..increment()
    ..decrement();
  // -> Received event: Instance of 'Incremented'; current value: 0
  // -> Received event: Instance of 'Decremented'; current value: 0

  await Future<void>.delayed(Duration.zero);

  // 这也将打印两次相同的事件，但值现在分别是1和0。这是因为print回调有时间运行之前，`decrement`被调用了。
  counter.increment();
  // -> Received event: Instance of 'Incremented'; current value: 1
  await Future<void>.delayed(Duration.zero);
  counter.decrement();
  // -> Received event: Instance of 'Decremented'; current value: 0
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用dart_event_notifier插件来进行事件通知的一个示例代码案例。dart_event_notifier插件允许你在Flutter应用中发布和订阅事件，非常适合用于状态管理和事件通知。

首先，确保你已经在pubspec.yaml文件中添加了dart_event_notifier依赖：

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

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

接下来，我们来看一个如何使用dart_event_notifier的简单示例。

1. 创建一个事件类

首先，我们定义一个自定义事件类。在这个例子中，我们定义一个简单的字符串事件：

class MyCustomEvent {
  final String message;

  MyCustomEvent(this.message);
}

2. 创建事件总线

接下来，我们创建一个事件总线，它负责事件的发布和订阅：

import 'package:dart_event_notifier/dart_event_notifier.dart';

class EventBus {
  final EventNotifier<MyCustomEvent> _eventNotifier = EventNotifier<MyCustomEvent>();

  // 获取事件订阅者
  EventSubscription<MyCustomEvent> subscribe(void Function(MyCustomEvent event) onData) {
    return _eventNotifier.subscribe(onData);
  }

  // 发布事件
  void publish(MyCustomEvent event) {
    _eventNotifier.publish(event);
  }
}

// 单例模式管理事件总线
final EventBus eventBus = EventBus();

3. 发布事件

在需要发布事件的地方，比如一个按钮点击事件：

import 'package:flutter/material.dart';
import 'event_bus.dart'; // 导入我们的事件总线

void _publishEvent() {
  eventBus.publish(MyCustomEvent("Hello, this is a custom event!"));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Event Notifier Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _publishEvent,
          child: Text('Publish Event'),
        ),
      ),
    );
  }
}

4. 订阅事件

在需要订阅事件的地方，比如在应用的主入口：

import 'package:flutter/material.dart';
import 'event_bus.dart'; // 导入我们的事件总线

void main() {
  // 订阅事件
  eventBus.subscribe((MyCustomEvent event) {
    print("Received event: ${event.message}");
  });

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

总结

在这个示例中，我们创建了一个自定义事件类MyCustomEvent，定义了一个事件总线EventBus来管理事件的发布和订阅。我们在一个按钮点击事件中发布了一个事件，并在应用的主入口订阅了该事件。每当事件被发布时，订阅者就会接收到事件并处理它（在这个例子中，是打印事件消息）。

这个示例展示了dart_event_notifier插件的基本用法，你可以根据需要扩展和修改这个示例来适应你的应用场景。

回到顶部