Flutter事件总线插件mitt的使用

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

Flutter事件总线插件mitt的使用

标题

Mitt (anyone-dart-mitt)

内容

This package helps you to use event emitter/pubsub with Dart. The package is inspired by npm mitt. I just take the same name because users would easily use it with the same way without any hesitation.

If you like my module, please buy me a coffee.

More and more tiny and useful GitHub action modules are on the way. Please donate to me. I accept part-time job contracts if you need. Please contact me: zhang_nan_163@163.com

如何使用

与mitt相同
import 'package:mitt/mitt.dart';

void main() {
  final emitter = Mitt();
  // 监听一个事件
  emitter.on(Symbol('foo'), eventHandler: (e) => print('foo $e'));

  // 监听所有事件
  emitter.on(Symbol('*'), wildcardHandler: (type, e) => print('$type $e'));

  // 触发一个事件
  emitter.emit(Symbol('foo'), [
    <String, String>{'a': 'b'}
  ]);

  // 清除所有事件
  emitter.all.clear();

  // 使用处理器引用:
  onFoo(arg) => print('defined onFoo with $arg');

  emitter.on(Symbol('foo'), eventHandler: onFoo); // 监听
  emitter.off(Symbol('foo'), eventHandler: onFoo); // 取消监听
}

示例代码

/*
 * [@Author](/user/Author): Edward Zhang 
 * [@Date](/user/Date): 2022-10-09 14:12:23 
 * [@Last](/user/Last) Modified by: Edward Zhang
 * [@Last](/user/Last) Modified time: 2022-10-09 14:56:04
 */
import 'package:mitt/mitt.dart';

void main() {
  final emitter = Mitt();
  // 监听一个事件
  emitter.on(Symbol('foo'), eventHandler: (e) => print('foo $e'));

  // 监听所有事件
  emitter.on(Symbol('*'), wildcardHandler: (type, e) => print('$type $e'));

  // 触发一个事件
  emitter.emit(Symbol('foo'), [
    <String, String>{'a': 'b'}
  ]);

  // 清除所有事件
  emitter.all.clear();

  // 使用处理器引用:
  onFoo(arg) => print('defined onFoo with $arg');

  emitter.on(Symbol('foo'), eventHandler: onFoo); // 监听
  emitter.off(Symbol('foo'), eventHandler: onFoo); // 取消监听
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用mitt事件总线插件的一个简单示例。mitt是一个轻量级的事件发射器,非常适合在Flutter应用中进行组件间的通信。

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

dependencies:
  flutter:
    sdk: flutter
  mitt: ^x.y.z  # 请替换为最新版本号

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

接下来,我们来看一个完整的示例,展示如何在Flutter中使用mitt

1. 创建一个事件总线实例

在你的项目中创建一个单例类来管理mitt事件总线实例。例如,可以创建一个名为EventBus.dart的文件:

import 'package:mitt/mitt.dart';

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

  factory EventBus() => _instance;

  Emitter emitter;

  EventBus._internal() {
    emitter = Emitter();
  }
}

2. 定义事件类型(可选)

虽然mitt支持任何类型的事件和数据,但定义一个事件类型可以使代码更具可读性和可维护性。例如,可以创建一个名为Events.dart的文件:

class Events {
  static const String counterIncremented = 'counter_incremented';
}

3. 发射事件

在你的业务逻辑中,你可以发射事件。例如,在main.dart中的某个按钮点击事件中:

import 'package:flutter/material.dart';
import 'EventBus.dart';
import 'Events.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Mitt Example'),
        ),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
      // 发射事件
      EventBus().emitter.emit(Events.counterIncremented, {'counter': _counter});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'You have pushed the button this many times:',
        ),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

4. 监听事件

在需要监听事件的组件中,你可以使用on方法来订阅事件。例如,我们可以在另一个组件中监听counter_incremented事件:

import 'package:flutter/material.dart';
import 'EventBus.dart';
import 'Events.dart';

class CounterListener extends StatefulWidget {
  @override
  _CounterListenerState createState() => _CounterListenerState();
}

class _CounterListenerState extends State<CounterListener> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    // 订阅事件
    EventBus().emitter.on(Events.counterIncremented, (event) {
      setState(() {
        _counter = event['counter'];
      });
      print('Counter incremented to: $_counter');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Listened Counter: $_counter'),
      ],
    );
  }

  @override
  void dispose() {
    // 取消订阅事件(可选,但推荐在组件销毁时取消订阅)
    EventBus().emitter.off(Events.counterIncremented);
    super.dispose();
  }
}

5. 使用监听组件

最后,在你的主布局中使用这个监听组件:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Mitt Example'),
        ),
        body: Column(
          children: <Widget>[
            Expanded(child: MyWidget()),
            Divider(),
            Expanded(child: CounterListener()),
          ],
        ),
      ),
    );
  }
}

以上代码展示了如何在Flutter项目中使用mitt事件总线插件来管理组件间的通信。你可以根据需要扩展这个示例,以适应更复杂的应用场景。

回到顶部