【开源鸿蒙跨平台开发先锋训练营】使用Flutter框架搭建鸿蒙App项目及代码管理
本文围绕 “Flutter 快速搭建鸿蒙 App+AtomGit 代码管理” 展开,核心介绍借助 Flutter 跨平台特性快速完成鸿蒙 App 项目初始化、界面搭建与鸿蒙特性适配的方法,大幅缩短开发周期;同时讲解将 Flutter 鸿蒙项目接入 AtomGit 的实操要点,包括代码仓库创建、提交推送、分支管理等,通过 AtomGit 实现项目版本管控与团队协作,既发挥 Flutter 跨端开发效
对于移动App(iOS)出身的开发者,使用谷歌Flutter框架是切入鸿蒙应用开发的最优解。Flutter作为跨平台开发框架,其"一次编写,多端运行"的特性与iOS开发者熟悉的SwiftUI/Xcode开发模式高度契合。
前言
本贴将介绍如何使用Flutter搭建鸿蒙os应用以及将代码托管到atomgit。
框架选型
为什么选Flutter,这里先简单说下我的看法,对于摇摆不定的朋友可以做个参考。以下是Flutter框架的介绍:
Flutter支持多平台开发,包括鸿蒙OS。使用同一套代码可同时构建Android、iOS和鸿蒙应用,显著减少开发时间和成本。
丰富的UI组件
Flutter提供大量预构建的Material Design和Cupertino风格组件,同时支持自定义设计,可快速适配鸿蒙OS的UI规范,保持视觉一致性。
热重载功能
开发过程中修改代码后无需重新编译,通过热重载即时查看效果,极大提升鸿蒙应用开发的迭代效率。
社区与生态支持
Flutter拥有活跃的开发者社区和丰富的第三方插件,许多现有插件稍作适配即可用于鸿蒙OS,加速功能集成。
降低学习成本
若团队已熟悉Flutter,无需额外学习鸿蒙专属开发语言(如ArkTS),即可快速投入鸿蒙应用开发。
未来兼容性
华为对Flutter的支持持续增强,未来鸿蒙OS的更新更可能保持与Flutter的兼容性,减少长期维护风险。
开发环境
电脑:Macos Tahoe 26.0.1
IDE: Cursor Version: 2.2.43 (Universal) + DevEco Studio 6.0.0 Release
Flutter : Flutter 3.27.5-ohos-1.0.0
其他:FVM 3.2.1

搭建项目
关于环境的搭建这里不着重介绍,Flutter框架可以点击下载🫱Flutter,选择合适的版本,建议使用默认。
环境搭建好后创建项目;
1. 创建项目
在目标目录下执行以下命令flutter create --org com.qson pai_fusion_tactics
命令解析:flutter create --org [包名的前2部分] [项目名]
- 一般包名是 com.qson.project_name , 新建项目成功后,会自动给你拼接上项目名,所以这里只需要设置前2部分,即
com.qson就行,如图
通过命令创建的项目结构,ohos 代表鸿蒙系统目录,其他有android、macos、web、iOS、linux等系统目录。
2. 运行项目
使用DevEco-Studio工具打开ohos目录,
点开标注的位置,选中Device Manager 下载安装你需要的模拟机,我这边安装的是Mate 70 Pro
启动模拟器后,然后关闭Device Manager 在同样的位置切换你的模拟器,点击旁边的调试按钮即可运行项目
如果控制台没有报错,那么恭喜你,项目运行成功,你已经完成了第一步了
代码管理
代码仓库推荐使用 atomgit
注册登录后,点击新建, 在新建项目中输入你前面创建的项目信息
进入个人设置页面- 访问令牌,新建访问令牌
补充令牌名称等信息,然后点击下面新建按钮,令牌务必保管好,如果丢失,只能重新创建一个新的。
1. 托管代码
然后在你的项目路径下依次执行如下命令即可,命令执行中会要输入用户名和令牌。
git init
git remote add origin git@gitcode.com:gcw_eOpTq9zN/calm_harbor.git
git add .
git commit -m "Initial commit"
git branch -m main
git push -u origin main

如果想省去每次push都手输用户名和令牌,可以通过下面命令将用户名和令牌绑定,方便认证
git remote set-url origin https://gcw_eOpTq9zN:hscWVy-M7yV8nUStKoegrpxH@gitcode.com/gcw_eOpTq9zN/calm_harbor.git
设置好后,后续git push就可以省去手输用户名和令牌的麻烦。
至此,代码已上架到云端仓库,🫱calm_harbor
2. 拉取代码
如果想拉取前面的代码学习的,可以进入calm_harbor,使用以下命令
git clone https://gitcode.com/gcw_eOpTq9zN/calm_harbor.git

结束语
感谢阅读本帖,如对贴中内容有意见和建议的,欢迎与我联系交流,也欢迎加入开源鸿蒙跨平台社区:
https://openharmonycrossplatform.csdn.net
更多推荐




所有评论(0)