Flutter事件管理插件event_manager的使用

Flutter事件管理插件event_manager的使用

本包帮助开发者在Flutter中构建基于事件驱动的架构。只需注册带有多个处理器的事件,当事件被触发时,每个处理器将按其注册顺序依次调用。

使用

请参考示例文件以了解更多细节。

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:event_manager/event_manager.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是您的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  [@override](/user/override)
  void initState() {
    // 注册处理程序
    EventManager.registerHandler(name: 'string_test', handler: eventHandler);
    EventManager.registerHandler(name: 'custom_test', handler: removableHandler);
    super.initState();
  }

  // 总是记得在视图销毁前移除处理程序。这有助于GC释放内存。
  [@override](/user/override)
  void dispose() {
    EventManager.removeHandler(name: 'string_test', handler: eventHandler);
    EventManager.removeHandler(name: 'custom_test', handler: removableHandler);
    super.dispose();
  }

  void _incrementCounter() {
    // 触发字符串事件
    EventManager.trigger('string_test', 'Test event!');
    // 触发自定义事件
    if (_counter % 5 == 0) {
      EventManager.trigger('custom_test');
    } else if (_counter % 2 == 0) {
      EventManager.trigger('custom_test', MyTestClass(_counter, 'Custom data'));
    }
    // 在计数器等于15时移除自定义事件处理程序
    if (_counter == 15) {
      log('removing custom event');
      EventManager.removeHandler(name: 'custom_test', handler: removableHandler);
    }
    // 更新计数器
    setState(() {
      _counter++;
    });
  }

  // 处理字符串事件
  void eventHandler(Event? event) {
    if (event != null) {
      log('String event: ${(event.data) as String}');
    }
  }

  // 处理自定义事件
  void removableHandler(event) {
    Event? e = event as Event?;
    if (e != null) {
      MyTestClass data = (e.data) as MyTestClass;
      log('Custom event: ${data.a} | ${data.b}');
    } else {
      log('Custom event without data');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '你已经点击了按钮这么多次:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

// 自定义类
class MyTestClass {
  int a;
  String b;

  MyTestClass(this.a, this.b);

  int get aval {
    return a;
  }

  String get bval {
    return b;
  }
}

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

1 回复

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


在Flutter中,事件管理是一个常见的需求,尤其是在处理异步操作、用户交互或其他应用程序事件时。虽然Flutter本身提供了丰富的事件处理机制,但有时你可能需要使用一个专门的插件来更好地管理事件。event_manager 是一个用于事件管理的插件,它可以帮助你更高效地处理事件。

1. 安装 event_manager

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

dependencies:
  flutter:
    sdk: flutter
  event_manager: ^1.0.0  # 请使用最新版本

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

2. 基本使用

2.1 创建事件管理器

首先,你需要创建一个 EventManager 实例来管理事件。

import 'package:event_manager/event_manager.dart';

final eventManager = EventManager();

2.2 注册事件监听器

你可以使用 on 方法来注册事件监听器。当事件触发时,监听器会被调用。

eventManager.on('my_event', (data) {
  print('Event triggered with data: $data');
});

2.3 触发事件

你可以使用 emit 方法来触发事件,并传递数据。

eventManager.emit('my_event', {'key': 'value'});

2.4 移除事件监听器

如果你不再需要监听某个事件,可以使用 off 方法来移除监听器。

eventManager.off('my_event');

3. 示例代码

以下是一个完整的示例,展示了如何使用 event_manager 插件来管理事件。

import 'package:flutter/material.dart';
import 'package:event_manager/event_manager.dart';

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

class MyApp extends StatelessWidget {
  final eventManager = EventManager();

  MyApp() {
    // 注册事件监听器
    eventManager.on('button_clicked', (data) {
      print('Button clicked with data: $data');
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Event Manager Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 触发事件
              eventManager.emit('button_clicked', {'message': 'Hello, Event Manager!'});
            },
            child: Text('Click Me'),
          ),
        ),
      ),
    );
  }
}

4. 高级用法

4.1 一次性事件监听器

你可以使用 once 方法来注册一个一次性事件监听器,该监听器在事件触发后会自动移除。

eventManager.once('one_time_event', (data) {
  print('This event will only trigger once: $data');
});

4.2 批量移除事件监听器

你可以使用 offAll 方法来移除某个事件的所有监听器。

eventManager.offAll('my_event');

4.3 链式调用

event_manager 支持链式调用,方便你更简洁地管理事件。

eventManager
  ..on('event1', (data) { print('Event 1: $data'); })
  ..on('event2', (data) { print('Event 2: $data'); })
  ..emit('event1', {'key': 'value1'})
  ..emit('event2', {'key': 'value2'});
回到顶部