当前位置:首页>鸿蒙APP>Flutter跨平台开发鸿蒙应用的过程总结

Flutter跨平台开发鸿蒙应用的过程总结

  • 2026-11-02 02:15:15
Flutter跨平台开发鸿蒙应用的过程总结

摘要:本文主要介绍跨平台开发框架 Flutter。Flutter 到底是什么?开发环境怎么搭?代码怎么跑?并运行第一个 Flutter App!

一、跨平台工具的三国鼎立

在跨平台开发领域,主流方案可以分为三大类:

框架

类型

原理

优点

缺点

Cordova, Ionic
WebView 容器
用 H5 页面包装成 App
开发快,前端上手简单
性能差,卡顿
React Native, Weex, Uni-app
原生桥接
JS 代码通过桥接调用原生组件
性能较好,生态丰富
复杂场景仍需原生知识,额外桥接开销
Flutter, Qt
自绘引擎

框架自己绘制所有 UI 组件(Skia 引擎)

性能接近原生,一套代码多端一致

包体积稍大,需额外学习 Dart 语言

本文总结介绍的是Flutter,属于自绘引擎,不依赖各系统的原生UI控件,而是自己调用skia绘制,因此不管在 iOS、Android 还是鸿蒙上,相同的界面,看到的都是一样的。

二、Flutter 原理与工作流程

Flutter 的架构分为三层(三棵树):

说明:

Framework 层:开发者写 Dart 代码,使用 Widget 组件库

Engine 层:负责渲染、事件处理、插件管理

Embedder 层:适配不同操作系统(iOS、Android、鸿蒙等)

核心思想:一切皆 Widget。整个界面是一棵树,通过 setState 触发重建,只更新变化的部分。Flutter 的 热重载(Hot Reload)技术,使我们再修改代码后可以迅速看到修改后的效果。

三、环境部署:

前置条件:预按照JDK 17和GIT,DEVECO STUDIO等软件,本文忽略其过程。

1. 安装flutter sdk;

2. deveco studio安装ARKUI-X,创建文件夹,并安装ARKUI-X。

3. 配置鸿蒙SDK环境变量

为了执行hdc命令方便,需要设置环境变量,包括下面红框中的几个变量,需要根据自己安装DEVECOSTUDIO的路径修改为自己的。

4. 下载适配鸿蒙的flutter SDK

创建准备放置FLUTTER的文件夹,我创建的是:D:\hm\CD\flutter,大家根据自己的习惯和安排创建,注意不要有中文,特殊字符,空格等。

然后通过git命令下载。

git clone -b oh-3.27.4-dev https://gitcode.com/openharmony-tpc/flutter_flutter.git
下载中:
(为了演示新建了一个文件夹)
下载完成后,文件夹中会有一个叫flutter_flutter的子文件夹。
完成后添加flutter的运行的环境变量到path中,如下图。
5. 检查flutter的版本。
四、运行我的第一个flutter项目:
1. 创建一个存放project的文件夹,如projects:

       D:\hm\CD\project(根据自己的习惯创建)

2. 创建项目:

flutter create --platforms ohos counter_app

在创建好的项目中,执行如下命令构建打包APP。

flutter build app --release
执行命令的目录地址:
构建中:
构建完成:

这时我们就可以在ohos\build\outputs\default目录下找到未签名的hap包。

3. 真机调试:

首先在deveco studio中打开项目:

打开鸿蒙设备进行测试,注意鸿蒙设备需打开开发者模式,因本文不是介绍开发者模式,故不介绍详细过程,可参考官网或咨询AI。

因为没有做签名,所以会遇到如下报错:

点击蓝色的超链接:open signing configs,进行自动签名,点击应用或OK即可:

签名后再次运行,即可以看到在真机上运行成功。

真机上运行拍照/录屏:

至此,一个flutter的鸿蒙项目的运行就完成了。

由于flutter的代码是DART写的,因此还需要单独学习DART开发,本文不做展开,仅介绍下代码所在位置,实验可先做简单改动(如修改初始值,显示文字,加改减等)。

参考文章:

https://openharmonycrossplatform.csdn.net/691c900c0e4c466a32e8fb49.html,除了这篇文章建议的增加国内镜像的环境变量不要增加外,这篇文章算是写的很详细了,点赞!

最新文章

随机文章