【拥抱鸿蒙】Flutter+Cursor 轻松打造 HarmonyOS 应用（一）

作者：郑知鱼

2025-05-29
湖北
本文字数：2402 字
阅读完需：约 8 分钟

前言

在移动应用开发领域，Flutter 以其出色的跨平台能力和高效的开发体验赢得了众多开发者的青睐，是许多移动开发者混合开发的首选。

随着 HarmonyOS 的崛起，许多开发者开始探索如何将 Flutter 应用迁移到鸿蒙生态。本文将带你从零开始，使用 Flutter 开发 HarmonyOS 应用，并借助强大的 AI 编程助手 Cursor 来加速 UI 开发过程。

这是“【拥抱鸿蒙】Flutter+Cursor 轻松打造 HarmonyOS 应用”系列的第一篇。

一、环境准备：搭建 Flutter for HarmonyOS 开发环境

1.1 基础工具安装

首先确保你的开发机器已安装以下基础工具：

Flutter SDK（推荐 3.13.0 或更高版本）
HarmonyOS 开发工具：API12, deveco-studio-5.0 或 command-line-tools-5.0 (推荐使用 5.0.0 Release 或更新版本)
JDK17
配置环境变量

 export TOOL_HOME=/Applications/DevEco-Studio.app/Contents # mac环境 export DEVECO_SDK_HOME=$TOOL_HOME/sdk # command-line-tools/sdk export PATH=$TOOL_HOME/tools/ohpm/bin:$PATH # command-line-tools/ohpm/bin export PATH=$TOOL_HOME/tools/hvigor/bin:$PATH # command-line-tools/hvigor/bin export PATH=$TOOL_HOME/tools/node/bin:$PATH # command-line-tools/tool/node/bin

复制代码

📢📢📢注意这里有一个问题需要注意，支持鸿蒙的 Flutter SDK 版本目前是 3.22.0 版本。在开发适配 iOS 和 Android 时，我们使用的 Flutter 版本可能高于 3.22.0。这时，因此需要使用fvm对 Flutter 版本进行管理，可以同时维护和切换多个 Flutter 版本。同时也建议，Flutter 的鸿蒙应用仓库最好和其他端仓库分开，因为目前支持鸿蒙的 Flutter 版本是滞后于 Flutter 官方版本的。

使用fvm维护多个版本示例：

1.2 配置 Flutter 鸿蒙支持

目前 Flutter 对 HarmonyOS 的支持主要通过开源项目OpenHarmony-TPC/flutter_flutter实现。

该仓库是基于 Flutter 官方仓库的 3.22.0 版本，对于 OpenHarmony 平台的兼容拓展。可支持 IDE 或者终端使用 Flutter Tools 指令编译和构建 OpenHarmony 应用程序。

Build 前需使用 fvm 切换 Flutter 版本：

fvm use custom_3.22.0

复制代码

1.3 环境验证

创建新项目并检查鸿蒙支持：

flutter create my_harmony_appcd my_harmony_appflutter run -d harmony

复制代码

如果看到鸿蒙模拟器或真机上运行着 Flutter 的默认启动页面，说明环境配置成功！

二、Flutter 鸿蒙开发框架解析

2.1 架构概览

Flutter 在 HarmonyOS 上的运行架构分为三层：

框架层：Dart 实现的 Flutter 框架
引擎层：Skia 渲染引擎+鸿蒙适配层
系统层：HarmonyOS 的 ACE（Ability Cross-platform Environment）

2.2 关键差异点

与 Android/iOS 平台相比，Flutter 在鸿蒙上需要注意：

页面导航：使用 HarmonyOS 的 Page Ability 而非 Activity/ViewController
权限系统：鸿蒙特有的权限声明方式
原生交互：通过ffi与鸿蒙的 Native API 通信

2.3 常用适配组件

import 'package:flutter_harmony/harmony.dart';
// 鸿蒙特色的组件HarmonyApp(  config: HarmonyConfig(    abilityName: 'MainAbility', // 对应的鸿蒙Ability名称  ),  home: MyHomePage(),);

复制代码

三、Flutter 与鸿蒙原生交互

3.1 导入原生插件

与其他端类似，ohos 工程中需要GeneratedPluginRegistrant.ets文件导入 Flutter 生成的原生插件。

3.2 实现 FlutterPlugin

定义一个类作为FlutterPlugin的实现，并在onAttachedToEngine(binding: FlutterPluginBinding): void 方法中使用MethodChannel监听 Flutter 调用的方法。

export default class HMFlutterPlugin implements FlutterPlugin {  private channel?: MethodChannel;  private basicChannel?: BasicMessageChannel<Any>;  private context?: common.UIAbilityContext;
  setContext(context: common.UIAbilityContext) {    this.context = context;  }
  onAttachedToEngine(binding: FlutterPluginBinding): void {    this.channel = new MethodChannel(binding.getBinaryMessenger(), "com.xxx.app/message");    this.channel.setMethodCallHandler({      onMethodCall: (call: MethodCall, result: MethodResult) => {        if (!this.context) {          result.error("CONTEXT_NOT_INITIALIZED", "Context is not initialized", null);        }
        const argsRec = call.args as Map<string, Object>;        LogUtil.info(`[flutter-call-ohos]\nmethod: ${call.method}\nargs: ${JSONUtil.toJSONString(argsRec)}`);        switch (call.method) {          case "xxx": {            break;          }          default: break;        }}

复制代码

3.3 配置 FlutterEngine

在 EntryAbility.ets 中实现configureFlutterEngine(flutterEngine: FlutterEngine) 方法。

configureFlutterEngine(flutterEngine: FlutterEngine) {    super.configureFlutterEngine(flutterEngine)    GeneratedPluginRegistrant.registerWith(flutterEngine)    const plugin = new HMFlutterPlugin();    plugin.setContext(this.context);    this.addPlugin(plugin);  }

复制代码

3.4 回调返回给 Flutter 端

使用result.success(res);回调执行成功的数据；使用result.error(errorCode, error.message, null);回调执行失败的错误信息。

try {    // xxx接口功能实现    result.success(res);} catch (err) {    let error = err as BusinessError;    result.error(errorCode, error.message, null);}

复制代码

3.5 Flutter 调用鸿蒙原生方法并接收回调数据

try {    final res = await _channel.invokeMethod('method_ohos');    return res.toString().toLowerCase() == 'true' || res.toString() == '1';} catch (e) {    printError('get network status error: $e');}

复制代码

总结

本篇主要介绍了 Flutter 开发鸿蒙应用的环境搭建和交互，我们将在下篇介绍如何借助 Cursor 提高开发效率让我们的开发之旅轻松而有趣。

我是郑知鱼🐳，欢迎大家讨论与指教。

如果你觉得有所收获，也请点赞👍🏻收藏⭐️关注🔍我吧~~

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/217e9ac791510db5f3e825f2b】。文章转载请联系作者。

郑知鱼

关注

🐳吾非鱼，亦可知鱼之乐。 2025-05-23 加入

iOS | ohos

发布

暂无评论

创作场景

【拥抱鸿蒙】Flutter+Cursor 轻松打造 HarmonyOS 应用（一）

前言

一、环境准备：搭建 Flutter for HarmonyOS 开发环境

1.1 基础工具安装

1.2 配置 Flutter 鸿蒙支持

1.3 环境验证

二、Flutter 鸿蒙开发框架解析

2.1 架构概览

2.2 关键差异点

2.3 常用适配组件

三、Flutter 与鸿蒙原生交互

3.1 导入原生插件

3.2 实现 FlutterPlugin

3.3 配置 FlutterEngine

3.4 回调返回给 Flutter 端

3.5 Flutter 调用鸿蒙原生方法并接收回调数据

总结

郑知鱼

评论