Flutter跨平台开发鸿蒙化EventBus使用指南

本文介绍了EventBus在Flutter跨平台开发鸿蒙化项目中的应用。EventBus是一个基于发布-订阅模式的轻量级事件总线库，可用于组件间通信。文章详细说明了环境准备、API调用流程，包括事件定义、订阅、发布和销毁等步骤，并提供了完整的代码示例。通过EventBus可实现Flutter组件间的解耦通信，在鸿蒙平台同样适用，有助于提高代码的可维护性和扩展性。

yaoyaoxingzhe

562人浏览 · 2025-12-23 23:02:29

yaoyaoxingzhe · 2025-12-23 23:02:29 发布

一、EventBus插件介绍

EventBus是一个轻量级的事件总线库，用于Flutter应用中的组件间通信。它基于发布-订阅模式，允许不同组件之间通过事件进行通信，有效解耦组件关系，提高代码的可维护性和扩展性。在Flutter跨平台开发鸿蒙化项目中，EventBus同样可以作为一个重要的通信工具，帮助开发者实现组件间的灵活通信。

在这里插入图片描述

二、环境准备

2.1 开发环境要求

Flutter SDK 3.7.0或更高版本
OpenHarmony SDK API 9或更高版本
DevEco Studio 3.0或更高版本
Node.js 16.0或更高版本

2.2 包的引入

在Flutter项目的pubspec.yaml文件中添加EventBus依赖：

dependencies:
  flutter:
    sdk: flutter

  # 以Git形式引入适配OpenHarmony的EventBus包
  event_bus:
    git:
      url: "https://atomgit.com/"
      path: "packages/event_bus/event_bus"

添加依赖后，执行以下命令获取包：

flutter pub get

三、EventBus API的调用与使用

3.1 基本使用流程

EventBus的使用主要包括以下几个步骤：

定义事件类
创建EventBus实例
订阅事件
发布事件
销毁事件总线（可选）

3.2 定义事件类

事件类是用于在组件间传递数据的载体，可以根据需要定义不同类型的事件类：

// events.dart
import 'package:event_bus/event_bus.dart';

/// 全局EventBus实例
EventBus eventBus = EventBus();

/// 字符串类型事件
class StringEvent {
  String content;
  StringEvent(this.content);
}

/// 整数类型事件
class IntEvent {
  int value;
  IntEvent(this.value);
}

/// Map类型事件
class MapEvent {
  Map<String, dynamic> data;
  MapEvent(this.data);
}

3.3 订阅事件

在需要接收事件的组件中订阅事件：

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

class EventSubscriberWidget extends StatefulWidget {
  const EventSubscriberWidget({Key? key}) : super(key: key);

  @override
  State<EventSubscriberWidget> createState() => _EventSubscriberWidgetState();
}

class _EventSubscriberWidgetState extends State<EventSubscriberWidget> {
  String _eventMessage = '等待接收事件...';
  late StreamSubscription _subscription;

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

    // 订阅StringEvent类型事件
    _subscription = eventBus.on<StringEvent>().listen((event) {
      setState(() {
        _eventMessage = '接收到字符串事件: ${event.content}';
      });
    });

    // 订阅所有类型事件
    eventBus.on().listen((event) {
      print('接收到事件: ${event.runtimeType}');
    });
  }

  @override
  void dispose() {
    // 取消订阅
    _subscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('EventBus订阅者示例')),
      body: Center(
        child: Text(
          _eventMessage,
          style: const TextStyle(fontSize: 20, color: Colors.black),
        ),
      ),
    );
  }
}

3.4 发布事件

在需要发送事件的组件中发布事件：

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

class EventPublisherWidget extends StatelessWidget {
  const EventPublisherWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('EventBus发布者示例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 发布字符串类型事件
                eventBus.fire(StringEvent('Hello, OpenHarmony!'));
              },
              child: const Text('发布字符串事件'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 发布整数类型事件
                eventBus.fire(IntEvent(2024));
              },
              child: const Text('发布整数事件'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 发布Map类型事件
                eventBus.fire(MapEvent({
                  'name': 'EventBus',
                  'version': '2.0.0',
                  'platform': 'OpenHarmony'
                }));
              },
              child: const Text('发布Map事件'),
            ),
          ],
        ),
      ),
    );
  }
}

3.5 销毁事件总线

在应用退出或不再需要使用EventBus时，可以销毁事件总线以释放资源：

// 销毁事件总线
eventBus.destroy();

四、EventBus在鸿蒙项目中的完整示例

4.1 项目结构

flutter_samples-master/
├── ohos/
│   └── event_bus_test/
│       ├── lib/
│       │   ├── src/
│       │   │   ├── events.dart        # 事件定义
│       │   │   ├── publisher_page.dart # 事件发布页面
│       │   │   └── subscriber_page.dart # 事件订阅页面
│       │   └── main.dart              # 应用入口
│       └── pubspec.yaml              # 项目配置

4.2 应用入口实现

// main.dart
import 'package:flutter/material.dart';
import 'src/publisher_page.dart';
import 'src/subscriber_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter EventBus OpenHarmony Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('EventBus鸿蒙化示例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const SubscriberPage()),
                );
              },
              child: const Text('打开订阅者页面'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const PublisherPage()),
                );
              },
              child: const Text('打开发布者页面'),
            ),
          ],
        ),
      ),
    );
  }
}