【拥抱鸿蒙】Flutter+Cursor轻松打造HarmonyOS应用（一）
<h2 id="前言">前言</h2><p>在移动应用开发领域，Flutter以其出色的跨平台能力和高效的开发体验赢得了众多开发者的青睐，是许多移动开发者混合开发的首选。</p>
<p>随着HarmonyOS的崛起，许多开发者开始探索如何将Flutter应用迁移到鸿蒙生态。本文将带你从零开始，使用Flutter开发HarmonyOS应用，并借助强大的AI编程助手Cursor来加速UI开发过程。</p>
<p>这是“【拥抱鸿蒙】Flutter+Cursor轻松打造HarmonyOS应用”系列的第一篇。</p>
<h2 id="一环境准备搭建flutter-for-harmonyos开发环境">一、环境准备：搭建Flutter for HarmonyOS开发环境</h2>
<h3 id="11-基础工具安装">1.1 基础工具安装</h3>
<p>首先确保你的开发机器已安装以下基础工具：</p>
<ul>
<li>
<p><strong>Flutter SDK</strong>（推荐3.13.0或更高版本）</p>
<pre><code class="language-bash"># 下载Flutter SDK
git clone https://github.com/flutter/flutter.git -b stable
# 添加环境变量
export PATH="$PATH:`pwd`/flutter/bin"
# 运行flutter doctor检查依赖
flutter doctor
</code></pre>
</li>
<li>
<p><strong>HarmonyOS开发工具</strong>：<br>
API12, deveco-studio-5.0 或 command-line-tools-5.0 (推荐使用5.0.0 Release或更新版本)</p>
</li>
<li>
<p><strong>JDK17</strong></p>
</li>
<li>
<p><strong>配置环境变量</strong></p>
</li>
</ul>
<pre><code class="language-bash"> 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
</code></pre>
<p>📢📢📢注意<br>
这里有一个问题需要注意，支持鸿蒙的Flutter SDK版本目前是3.22.0版本。在开发适配iOS和Android时，我们使用的Flutter版本可能高于3.22.0。这时，因此需要使用fvm对Flutter版本进行管理，可以同时维护和切换多个Flutter版本。同时也建议，Flutter的鸿蒙应用仓库最好和其他端仓库分开，因为目前支持鸿蒙的Flutter版本是滞后于Flutter官方版本的。</p>
<p>使用<code>fvm</code>维护多个版本示例：</p>
<p><img src="https://img2024.cnblogs.com/blog/3652266/202505/3652266-20250528120641798-1526553591.png"></p>
<h3 id="12-配置flutter鸿蒙支持">1.2 配置Flutter鸿蒙支持</h3>
<p>目前Flutter对HarmonyOS的支持主要通过开源项目OpenHarmony-TPC/flutter_flutter实现。</p>
<p>该仓库是基于Flutter官方仓库的3.22.0版本，对于OpenHarmony平台的兼容拓展。可支持IDE或者终端使用Flutter Tools指令编译和构建OpenHarmony应用程序。</p>
<p>Build前需使用fvm切换Flutter版本：</p>
<pre><code class="language-bash">fvm use custom_3.22.0
</code></pre>
<h3 id="13-环境验证">1.3 环境验证</h3>
<p>创建新项目并检查鸿蒙支持：</p>
<pre><code class="language-bash">flutter create my_harmony_app
cd my_harmony_app
flutter run -d harmony
</code></pre>
<p>如果看到鸿蒙模拟器或真机上运行着Flutter的默认启动页面，说明环境配置成功！</p>
<h2 id="二flutter鸿蒙开发框架解析">二、Flutter鸿蒙开发框架解析</h2>
<h3 id="21-架构概览">2.1 架构概览</h3>
<p>Flutter在HarmonyOS上的运行架构分为三层：</p>
<ol>
<li><strong>框架层</strong>：Dart实现的Flutter框架</li>
<li><strong>引擎层</strong>：Skia渲染引擎+鸿蒙适配层</li>
<li><strong>系统层</strong>：HarmonyOS的ACE（Ability Cross-platform Environment）</li>
</ol>
<h3 id="22-关键差异点">2.2 关键差异点</h3>
<p>与Android/iOS平台相比，Flutter在鸿蒙上需要注意：</p>
<ul>
<li><strong>页面导航</strong>：使用HarmonyOS的Page Ability而非Activity/ViewController</li>
<li><strong>权限系统</strong>：鸿蒙特有的权限声明方式</li>
<li><strong>原生交互</strong>：通过<code>ffi</code>与鸿蒙的Native API通信</li>
</ul>
<h3 id="23-常用适配组件">2.3 常用适配组件</h3>
<pre><code class="language-dart">import 'package:flutter_harmony/harmony.dart';
// 鸿蒙特色的组件
HarmonyApp(
config: HarmonyConfig(
abilityName: 'MainAbility', // 对应的鸿蒙Ability名称
),
home: MyHomePage(),
);
</code></pre>
<h2 id="三flutter与鸿蒙原生交互">三、Flutter与鸿蒙原生交互</h2>
<h3 id="31-导入原生插件">3.1 导入原生插件</h3>
<p>与其他端类似，ohos工程中需要<code>GeneratedPluginRegistrant.ets</code>文件导入Flutter生成的原生插件。</p>
<h3 id="32-实现flutterplugin">3.2 实现FlutterPlugin</h3>
<p>定义一个类作为<code>FlutterPlugin</code>的实现，并在<code>onAttachedToEngine(binding: FlutterPluginBinding): void </code>方法中使用<code>MethodChannel</code>监听Flutter调用的方法。</p>
<pre><code class="language-typescript">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(`\nmethod: ${call.method}\nargs: ${JSONUtil.toJSONString(argsRec)}`);
switch (call.method) {
case "xxx": {
break;
}
default: break;
}
}
</code></pre>
<h3 id="33-配置flutterengine">3.3 配置FlutterEngine</h3>
<p>在EntryAbility.ets中实现<code>configureFlutterEngine(flutterEngine: FlutterEngine) </code>方法。</p>
<pre><code class="language-typescript">configureFlutterEngine(flutterEngine: FlutterEngine) {
super.configureFlutterEngine(flutterEngine)
GeneratedPluginRegistrant.registerWith(flutterEngine)
const plugin = new HMFlutterPlugin();
plugin.setContext(this.context);
this.addPlugin(plugin);
}
</code></pre>
<h3 id="34-回调返回给flutter端">3.4 回调返回给Flutter端</h3>
<p>使用<code>result.success(res);</code>回调执行成功的数据；使用<code>result.error(errorCode, error.message, null);</code>回调执行失败的错误信息。</p>
<pre><code class="language-typescript">try {
// xxx接口功能实现
result.success(res);
} catch (err) {
let error = err as BusinessError;
result.error(errorCode, error.message, null);
}
</code></pre>
<h3 id="35-flutter调用鸿蒙原生方法并接收回调数据">3.5 Flutter调用鸿蒙原生方法并接收回调数据</h3>
<pre><code class="language-dart">try {
final res = await _channel.invokeMethod('method_ohos');
return res.toString().toLowerCase() == 'true' || res.toString() == '1';
} catch (e) {
printError('get network status error: $e');
}
</code></pre>
<h2 id="总结">总结</h2>
<p>本篇主要介绍了Flutter开发鸿蒙应用的环境搭建和交互，我们将在下篇介绍如何借助Cursor提高开发效率让我们的开发之旅轻松而有趣。</p>
<p>我是郑知鱼🐳，欢迎大家讨论与指教。<br>
如果你觉得有所收获，也请点赞👍🏻收藏⭐️关注🔍我吧~~</p><br><br>
来源：https://www.cnblogs.com/songmin/p/18900380/flutter-plus-cursor-to-develop-ohos-app 哇，楼主好棒！又见干货帖子！🙌
一直想学Flutter开发鸿蒙应用，但是环境配置这块确实劝退了不少人。fvm管理多版本这个思路很赞，解决了版本兼容的大问题！👍
有个小问题想请教一下：如果项目本身依赖比较多第三方库，这些库在鸿蒙版Flutter上兼容性怎么样？需要额外处理吗？
另外关于Cursor，确实是近期最火的AI编程工具了，效率提升很明显。期待下篇的实操演示！😁
鸿蒙生态现在发展势头很猛，Flutter能支持鸿蒙对开发者来说是好事。希望有更多这样的教程，帮助大家入坑！
支持一下！点赞加油
坐等更新第二篇～
頁:
[1]