【开源鸿蒙跨平台开发先锋训练营】使用Flutter框架搭建鸿蒙App项目及代码管理

对于移动App（iOS）出身的开发者，使用谷歌Flutter框架是切入鸿蒙应用开发的最优解。Flutter作为跨平台开发框架，其"一次编写，多端运行"的特性与iOS开发者熟悉的SwiftUI/Xcode开发模式高度契合。

文章目录

• • 前言
  • 框架选型
  • • • 丰富的UI组件
      • 热重载功能
      • 社区与生态支持
      • 降低学习成本
      • 未来兼容性
  • 开发环境
  • 搭建项目
  • • 1. 创建项目
    • 2. 运行项目
  • 代码管理
  • • 1. 托管代码
    • 2. 拉取代码
  • 结束语

前言

本贴将介绍如何使用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