Flutter事件总线插件mitt的使用
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
更多关于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
事件总线插件来管理组件间的通信。你可以根据需要扩展这个示例,以适应更复杂的应用场景。