Flutter 与 OpenHarmony 通信:Flutter Channel 使用指南

Flutter 与 OpenHarmony 通信:Flutter Channel 使用指南

欢迎大家加入跨平台社区

本文介绍在 Flutter OpenHarmony 化工程中,如何利用 Flutter Channel 实现 Dart 代码与 OpenHarmony 原生端(ETS)之间的通信。Flutter Channel 提供了灵活的消息传递机制,支持方法调用、基础消息通信和事件流三种常用模式。以下将分别说明其使用方法,并附上关键代码示例。

完整示例可参考 channel_demo


1. MethodChannel(方法调用)

MethodChannel 用于调用平台提供的特定方法,并支持异步返回结果。

Dart 端代码
dart 复制代码
// 创建 MethodChannel 实例
final _platform = const MethodChannel('samples.flutter.dev/battery');

// 调用原生端方法 getBatteryLevel
final result = await _platform.invokeMethod<int>('getBatteryLevel');
ETS 端代码
typescript 复制代码
onAttachedToEngine(binding: FlutterPluginBinding): void {
    let that = this;
    // 创建 MethodChannel 实例
    this.channel = new MethodChannel(binding.getBinaryMessenger(), "samples.flutter.dev/battery");
    
    // 设置方法调用处理器
    this.channel.setMethodCallHandler({
        onMethodCall(call: MethodCall, result: MethodResult) {
            switch (call.method) {
                case "getBatteryLevel":
                    that.api.getBatteryLevel(result);
                    break;
                default:
                    result.notImplemented();
                    break;
            }
        }
    });
}

2. BasicMessageChannel(基础消息通信)

BasicMessageChannel 用于简单的数据传递,支持双向异步消息收发。

Dart 端代码
dart 复制代码
int count = 0;

// 创建 BasicMessageChannel 实例
final _basicChannel = const BasicMessageChannel(
    "samples.flutter.dev/basic_channel", 
    StandardMessageCodec()
);

// 发送消息并接收回复
String result = await _basicChannel.send(++count) as String;
ETS 端代码
typescript 复制代码
onAttachedToEngine(binding: FlutterPluginBinding): void {
    // 创建 BasicMessageChannel 实例
    this.basicChannel = new BasicMessageChannel(
        binding.getBinaryMessenger(), 
        "samples.flutter.dev/basic_channel", 
        new StandardMessageCodec()
    );
    
    // 设置消息处理器
    this.basicChannel.setMessageHandler({
        onMessage(message: Any, reply: Reply<Any>) {
            Log.i(TAG, "message=" + message);
            if (message % 2 == 0) {
                reply.reply("run with if case.");
            } else {
                reply.reply("run with else case");
            }
        }
    });
}

3. EventChannel(事件流通信)

EventChannel 用于从原生端向 Dart 端发送连续的事件流,适用于状态监听、实时数据推送等场景。

Dart 端代码
dart 复制代码
// 创建 EventChannel 实例
final _eventChannel = const EventChannel('samples.flutter.dev/event_channel');

// 监听事件流
_eventChannel.receiveBroadcastStream().listen((event) {
    setState(() {
        message = "EventChannel event=$event";
    });
});
ETS 端代码
typescript 复制代码
private eventSink?: EventSink;

onAttachedToEngine(binding: FlutterPluginBinding): void {
    let that = this;
    
    // 创建 EventChannel 实例
    this.eventChannel = new EventChannel(
        binding.getBinaryMessenger(), 
        "samples.flutter.dev/event_channel"
    );
    
    // 设置流处理器
    this.eventChannel.setStreamHandler({
        onListen(args: Any, events: EventSink): void {
            that.eventSink = events;
            Log.i(TAG, "onListen: " + args);
        },
        onCancel(args: Any): void {
            that.eventSink = undefined;
            Log.i(TAG, "onCancel: " + args);
        }
    });
}

// 通过 EventSink 发送事件到 Dart 端
that.eventSink?.success("Success at " + new Date());

总结

通过上述三种 Channel,你可以灵活实现 Flutter 与 OpenHarmony 平台之间的双向通信:

  • MethodChannel:适用于调用特定平台功能并获取返回结果。
  • BasicMessageChannel:适用于简单的异步数据交换。
  • EventChannel:适用于平台向 Flutter 持续推送事件的场景。

在实际开发中,建议根据通信需求选择合适的 Channel 类型,并注意处理好通信过程中的异常与生命周期管理。

如果遇到问题,欢迎在评论区交流讨论。

相关推荐
利刃大大1 小时前
【Vue】Element-Plus快速入门 && Form && Card && Table && Tree && Dialog && Menu
前端·javascript·vue.js·element-plus
NEXT062 小时前
AI 应用工程化实战:使用 LangChain.js 编排 DeepSeek 复杂工作流
前端·javascript·langchain
念风零壹2 小时前
AI 时代的前端技术:从系统编程到 JavaScript/TypeScript
前端·ai
光影少年2 小时前
react的hooks防抖和节流是怎样做的
前端·javascript·react.js
小毛驴8502 小时前
Vue 路由示例
前端·javascript·vue.js
发现一只大呆瓜3 小时前
AI流式交互:SSE与WebSocket技术选型
前端·javascript·面试
m0_719084114 小时前
React笔记张天禹
前端·笔记·react.js
用户66116655296524 小时前
Futter3 仿抖音我的页面or用户详情页
flutter
Ziky学习记录4 小时前
从零到实战:React Router 学习与总结
前端·学习·react.js