Flutter for OpenHarmony （二）配置AtomGit、热更新、以及一个简单的示例

flutter harmony

这个萌新有点帅

672人浏览 · 2026-01-28 16:46:57

这个萌新有点帅 · 2026-01-28 16:46:57 发布

题记

上一篇写了简单的环境配置、遇到的问题以及最终呈现在HarmonyOS 终端上展示了我们一个简单的demo。
这次我们修改一下这个demo，并上传到AtomGit 环境上去（最近在国内的开发环境中，这个平台好像是挺火的，我们也来跟一下风），话不多说正文开始。

本文任务

配置AtomGit发送代码上去
解决上次缺少的java环境配置导致的报错问题
运行项目并进行热更新开发、debug等
展示一个简单的表单交互

AtomGit 配置

尽量写的简单一点，按照顺序就能搞，也碰到不少不爱“折腾”的开发者，希望看完本篇能有所帮助。

在 AtomGit 创建一个项目

在这里插入图片描述
点击我的项目，进入页面之后再点击新建项目。

点击创建项目，之后我们的项目就创建好了

配置 ssh-key

这一步比较简单，点击右上角的头像，在弹窗的选框中，选择个人设置，进入之后点击ssh公钥，进行添加ssh密钥就好了，这一步都是比较简单。生成密钥比较简单，这里就不加赘述了。

密钥测试
填写密钥完成之后，如何确定配置的密钥正常验证呢?

ssh -T git@gitcode.com
# remote: Welcome to GitCode, maolin319

这里需要注意的是，别用 git@github.com 这个就行，毕竟我们这次配置的是AtomGit。

连接gitcode仓库并上传代码

这里需要注意的一点，就是复制之前我们创建的库的ssh地址，不是http的地址，否则还是需要输入密码。

git init
git remote add origin git@gitcode.com:张三/李四的库
git add .
git commit -m "feat: 这里还是希望大家每次提交的时候，最好搞一个git 的提交规范"
# 我一般使用的是 angular 当时定义的一套，有时间可以上网去搜搜
git push # ssh -T 都测试没问题了。这里肯定也OK的

ssh多密钥管理

平时既实用github、gitcode，但是公司又使用私有的gitlab，这个时候密钥很容易就会出现问题，或者是记混了。这个时候就可以来一个配置实现多个密钥的管理。

先在~/.ssh文件夹中添加一个config文件

tree -L 1
.
├── config
├── gitcode
├── gitcode.pub
├── github
├── github.pub
├── id_rsa
└── id_rsa.pub

编辑config文件添加内容

# 配置：GitHub
# 当你执行 git clone git@github.com:... 时触发
Host github.com
    HostName github.com          # 实际连接的服务器域名
    IdentityFile ~/.ssh/github   # 私钥文件路径
Host gitcode.com
    HostName gitcode.com
    IdentityFile ~/.ssh/gitcode
# --- 1. 全局配置 (Global Settings) ---
# 自动将私钥添加到 SSH 代理 (ssh-agent)，避免每次重启电脑都要重新输入密钥密码
AddKeysToAgent yes
# 在 macOS 上，将密钥密码存储在系统钥匙串 (Keychain) 中
# 这样你只需要输入一次密钥密码，以后就会自动解锁
UseKeychain yes

ps: 这里的host 可以任意命名，但是在连接git库的时候，也需要把仓库的名改成跟host的域名一致，不然肯定是GG。

再次启动项目遇到的问题

在这里插入图片描述

再次使用命令进行启动的时候，竟然报错了，耐着性子看完才发现是之前没有关闭android studio导致我以为我本地环境中的java是可以用的。看来还是需要配置一下java的环境

java环境缺失

安装java的方式有很多种，我这里为了不麻烦就用了 android studio 中自带的 JDK。
老规矩，在系统变量中加入 JDK

# ----------- java
export JAVA_HOME="/Applications/Android Studio.app/Contents/jbr/Contents/Home"
export PATH="$JAVA_HOME/bin:$PATH"

重启命令验证一下出现如下提示说明java 环境已经配置好了

java --version
openjdk 21.0.8 2025-07-15
OpenJDK Runtime Environment (build 21.0.8+-14196175-b1038.72)
OpenJDK 64-Bit Server VM (build 21.0.8+-14196175-b1038.72, mixed mode)

再次执行一下打包命令，也是顺利运行

flutter build hap --debug
start hap build...
Running Hvigor task assembleHap...                                 10.9s
✓ Built build/ohos/hap/entry-default-signed.hap.

VSCODE 热更新，以及添加断点

热更新

运行项目：使用命令行进入项目根目录，运行：

flutter run

修改代码：在编辑器中修改 Dart 代码（UI 或逻辑）。
触发热重载：在运行 flutter run 的终端窗口中，按下字母 r (小写)。
效果：更新代码，并尽可能保持应用状态（如输入框内容、当前页面）。
热重启（可选）：按下 R (大写) 可进行热重启，这将重置应用状态。
常见命令说明
r：热重载 (Hot Reload) - 快速注入代码。
R：热重启 (Hot Restart) - 重新加载代码并重置状态。
q：退出应用。
实际效果

修改之后点击保存，不会立即更新，这时候我们在cli中点击一下r 就会立即看到效果

配置添加断点

~~迟来的正义~~ 还要手动热更新我不要，IDE中已经集成好了，我直接展示在vscode 中配置，每次直接保存直接运行。

配置launch.json
现在的vscode 比较智能，如果直接在main.dart 按住 F5 键，直接就可以进行debug。但是如果你在打开的其它文件(例如JSON文件中)中按F5的话，不出意外会出现报错。

这时候就体现debug 配置文件的重要性了，还能自行添加一些启动命令。

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter Debug (Main)",
            "request": "launch",
            "type": "dart",
            // 指定启动文件，默认就是 lib/main.dart
            "program": "lib/main.dart",
            "args": [
                "--debug",
                // "--flavor", "development" // 如果有不同变体
            ]
        }
    ]
}

测试一下
启动并点击之后，在我添加的断点出停止，等待我的下一步操作
在这里插入图片描述

开发一个表单交互

需求概述

我们需要构建一个包含“列表页”与“详情表单页”的用户管理系统。核心要求如下：

多维表单：包含账号、密码、昵称、备注以及四种带色值的性格选项（忧郁-蓝、活泼-绿、开朗-橙、奔放-红）。
动态 UI：

列表项背景根据选项展示渐变色。
备注超长处理（超过5字符显示省略号，长按查看全文）。
左滑操作（编辑、删除）。

设计思路

状态管理这里使用的是Provider + ChangeNotifier

class UserProvider extends ChangeNotifier {
  final List<User> _users = [];
  final _uuid = const Uuid();

  List<User> get users => List.unmodifiable(_users);

  void addUser({
    required String account,
    required String password,
    required String nickname,
    required String remarks,
    required UserOption option,
  }) {
    final user = User(
      id: _uuid.v4(),
      account: account,
      password: password,
      nickname: nickname,
      remarks: remarks,
      option: option,
    );
    _users.add(user);
    notifyListeners();
  }

  void updateUser(User updatedUser) {
    final index = _users.indexWhere((u) => u.id == updatedUser.id);
    if (index != -1) {
      _users[index] = updatedUser;
      notifyListeners();
    }
  }

  void deleteUser(String id) {
    _users.removeWhere((u) => u.id == id);
    notifyListeners();
  }
}

类型化的数据模型 (Data Modeling)
为了让代码更具可读性，我们没有使用硬编码的字符串或颜色，而是定义了 UserOption 枚举类。
优点：将“名称”与“颜色”绑定，UI 层只需通过 option.color 即可获取对应主题色，极大降低了维护成本。

import 'package:flutter/material.dart';

enum UserOption {
  melancholy(name: '忧郁', color: Colors.blue),
  lively(name: '活泼', color: Colors.green),
  cheerful(name: '开朗', color: Colors.orange),
  energetic(name: '奔放', color: Colors.red);

  final String name;
  final Color color;
  const UserOption({required this.name, required this.color});
}

class User {
  final String id;
  final String account;
  final String password;
  final String nickname;
  final String remarks;
  final UserOption option;

  User({
    required this.id,
    required this.account,
    required this.password,
    required this.nickname,
    required this.remarks,
    required this.option,
  });

  User copyWith({
    String? account,
    String? password,
    String? nickname,
    String? remarks,
    UserOption? option,
  }) {
    return User(
      id: this.id,
      account: account ?? this.account,
      password: password ?? this.password,
      nickname: nickname ?? this.nickname,
      remarks: remarks ?? this.remarks,
      option: option ?? this.option,
    );
  }
}

组件化与交互增强
侧滑操作：引入 flutter_slidable 插件。能提供流畅的交互反馈。
渐变视觉：通过 BoxDecoration 的 LinearGradient 实现背景渲染，增强页面的层次感和现代感。

    // 渐变背景色
    final gradient = LinearGradient(
      colors: [
        user.option.color.withValues(alpha: 0.2), // withOpacity 已经弃用了这点要注意
        user.option.color.withValues(alpha: 0.05),
      ],
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
    );

Container(
        decoration: BoxDecoration(gradient: gradient),
        child: ListTile(
          title: Text(
            user.nickname,
            style: const TextStyle(fontWeight: FontWeight.bold),
          ),
          subtitle: GestureDetector(
            onLongPress: () => _showFullRemarks(context, user.remarks),
            child: Text(
              user.remarks.length > 5
                  ? '${user.remarks.substring(0, 5)}...'
                  : user.remarks,
              style: TextStyle(color: Colors.grey[600]),
            ),
          ),
          trailing: Text(
            user.option.name,
            style: TextStyle(
              color: user.option.color,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),

长按反馈：利用 GestureDetector 的 onLongPress 触发 AlertDialog，平衡了简洁展示与信息完整性。

遇到的问题与解决方案

动态路由构建中的 Context 传递
问题：在 route_config.dart 中，最初的路由 builder 函数没有传递 context 参数，导致在通过 Navigator 跳转时无法正确构建依赖上下文的页面。
解决：将 builder 的签名改为 WidgetBuilder (即 Widget Function(BuildContext))，并在 ListView 的跳转逻辑中显示传递当前上下文，确保了路由系统的健壮性。
文字省略与完整显示的冲突
问题：备注字段可能非常长，直接展示会破坏列表的整齐感。
解决：在 UI 层对字符串进行截取拼接（.substring(0, 5) + ‘…’），并结合长按弹出对话框的设计。这样既保证了首屏的扫视效率，又保留了查看细节的能力。

实际的展示效果

发现本篇的篇幅是在是有些过长了，于是就缩短了一些过程。具体的详细代码都已经放到了文末的示例地址中去了，有兴趣可以去看看。
在这里插入图片描述

示例地址，点击跳转到gitcode

总结

本篇记录了将Flutter Demo适配OpenHarmony的第二阶段实践。主要完成以下工作：

配置AtomGit仓库，通过SSH上传代码，并解决多密钥管理问题；
修复Java环境缺失，利用Android Studio内置JDK成功构建HAP包；
实现VSCode热更新与断点调试，提升开发效率；
开发用户管理系统，包括列表页、详情表单（支持多字段、动态背景、左滑操作、长按查看备注）。

当前项目已上传至GitCode，表单交互功能基本实现。面临的主要挑战为环境配置、Context传递等。

Flutter在OpenHarmony上跑是可行的，而且边际成本不算太高——engine本身跨平台能力已经很强，主要是platform-specific的胶水代码需要补。
对想做纯血HarmonyOS App的开发者来说，这条路比从零用ArkTS写UI要省力得多（尤其是有现成Flutter业务代码的团队）。

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net