Flutter事件监听插件event_listener的使用

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

Flutter事件监听插件event_listener的使用

EventListener

License Pub Build Status

类似于NodeJS的事件监听库,用于Dart!

使用方法

监听事件

import 'package:event_listener/event_listener.dart';

void main() {
  var eventListener = new EventListener();

  // 注册一个事件监听器
  eventListener.on('log', (String message) {
    print("A log: " + message); // 打印日志消息
  });

  // 触发事件
  eventListener.emit('log', 'from me'); // 输出 "A log: from me"
}

一次性触发事件

import 'package:event_listener/event_listener.dart';

void main() {
  var eventListener = new EventListener();

  // 监听新的事件
  eventListener.on('newListener', (MapEntry<String, Event> deletedEvent) {
    print("New event name: " + deletedEvent.key);
    print("New event caller: " + deletedEvent.value.caller);
  });
  /*
    New event name: log
    New event caller: closure (String message) =>
  */

  // 只触发一次的事件监听器
  eventListener.once('log', (String message) {
    print("A last log: " + message); // 输出 "A last log: from me"
  });
  eventListener.emit('log', 'from me');
}

移除事件监听器

import 'package:event_listener/event_listener.dart';

void main() {
  var eventListener = new EventListener();

  // 监听移除事件
  eventListener.on('removeListener', (MapEntry<String, Event> deletedEvent) {
    print("Deleted event name: " + deletedEvent.key);
    print("Deleted event caller: " + deletedEvent.value.caller);
  });
  /*
    Deleted event name: log
    Deleted event caller: closure (String message) =>
  */

  // 创建一个事件监听器
  var logMe = (message) {
    print("A last log: " + message);
  };
  // A last log: from me

  // 添加事件监听器并触发事件
  eventListener.once('log', logMe);
  eventListener.emit('log', 'from me');

  // 移除事件监听器
  eventListener.removeEventListener('log', logMe);
}

移除所有事件监听器

import 'package:event_listener/event_listener.dart';

void main() {
  var eventListener = new EventListener();

  // 创建一个事件监听器
  var logMe = (String message) {
    print("A last log: " + message);
  };

  // 添加多个事件监听器
  eventListener.once('log', logMe);
  eventListener.on('log', logMe);
  eventListener.emit('log', 'from me');

  // 移除所有事件监听器
  eventListener.removeAllListeners('log');
}

贡献指南

这个包模仿了NodeJS的事件监听模块,你可以自由地修改包,只要它看起来与Node包相似即可。


完整示例Demo

以下是一个完整的示例,展示了如何在下载文件时使用事件监听插件:

import 'package:event_listener/event_listener.dart';
import 'package:http/http.dart' as http;

Future<void> main() async {
  var downloadEmitter = EventListener();
  var fileToDownload = 'http://ipv4.download.thinkbroadband.com/5MB.zip'; // 测试文件

  final client = http.Client();
  var response = client.send(http.Request('GET', Uri.parse(fileToDownload)));
  var downloaded = 0;

  // 创建一个事件监听器,用于打印下载进度
  var logger = (percent) {
    print('Percent: $percent%');
  };

  // 添加事件监听器
  downloadEmitter.on('download', logger);

  // 监听HTTP响应流
  response.asStream().listen((http.StreamedResponse r) {
    r.stream.listen((List<int> chunk) {
      // 计算并触发下载进度事件
      downloadEmitter.emit(
          'download', (downloaded / r.contentLength! * 100).floor());
      downloaded += chunk.length;
    }, onDone: () async {
      // 下载完成时触发事件
      downloadEmitter.emit(
          'download', (downloaded / r.contentLength! * 100).floor());
      downloadEmitter.removeEventListener('download', logger);
      print('Download complete removed listener');
      return;
    });
  });
}

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

1 回复

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


当然,以下是如何在Flutter中使用event_listener插件进行事件监听的代码示例。假设event_listener插件提供了对系统事件(如键盘显示/隐藏、屏幕旋转等)的监听功能。需要注意的是,实际的event_listener插件功能和API可能会有所不同,这里提供一个假设性的示例来展示如何使用。

首先,确保你的pubspec.yaml文件中包含了event_listener插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  event_listener: ^x.y.z  # 替换为实际的版本号

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

接下来,在你的Flutter应用中,你可以按照以下方式使用event_listener插件:

import 'package:flutter/material.dart';
import 'package:event_listener/event_listener.dart';  // 假设的导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Event Listener Demo'),
        ),
        body: EventListenerDemo(),
      ),
    );
  }
}

class EventListenerDemo extends StatefulWidget {
  @override
  _EventListenerDemoState createState() => _EventListenerDemoState();
}

class _EventListenerDemoState extends State<EventListenerDemo> {
  String _eventMessage = "No event received yet.";

  @override
  void initState() {
    super.initState();

    // 假设的监听器初始化
    EventListener.instance.listenKeyboardEvents((event) {
      setState(() {
        _eventMessage = "Keyboard event received: ${event.description}";
      });
    });

    EventListener.instance.listenScreenOrientationEvents((event) {
      setState(() {
        _eventMessage = "Screen orientation changed to: ${event.orientation}";
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            _eventMessage,
            style: TextStyle(fontSize: 20),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    // 取消监听事件,避免内存泄漏
    EventListener.instance.stopListeningKeyboardEvents();
    EventListener.instance.stopListeningScreenOrientationEvents();
    super.dispose();
  }
}

在这个示例中,我们假设event_listener插件提供了listenKeyboardEventslistenScreenOrientationEvents方法来监听键盘事件和屏幕旋转事件。当事件发生时,会调用相应的回调函数,并通过setState方法更新UI。

需要注意的是,实际的event_listener插件的API可能会有所不同,所以你需要查阅该插件的官方文档来获取正确的使用方法和API。此外,dispose方法中取消监听是非常重要的,以避免内存泄漏。

由于event_listener插件可能是一个假想的插件,具体的实现和API细节可能会有所不同。如果你正在使用一个真实的插件,请参考该插件的官方文档和示例代码。

回到顶部