基于HarmonyOS 7.0 跨端开发的宠物训练进度追踪页面实战

前言

技能养成类应用的核心，是把一项长期的训练拆解成可量化的技能点，用进度条记录每项的掌握程度，用打卡日历见证坚持。宠物训练就是典型：教狗狗坐下、握手、召回等技能，每项需要反复练习，主人想看到每项的进度和自己的坚持。本文以一个真实的宠物训练进度追踪页面（入口类 IntroPage）为样本，深入剖析它如何在 Flutter × HarmonyOS 7.0 架构下，用技能进度列表、渐变教程卡与爪印热力图日历，把"狗狗行为训练教程与进度追踪"的训练营体验完整落地。这是一个把"进度阈值着色"与"热力图日历"结合得很完整的页面，通过拆解它，我们能透彻理解 Flutter 的进度分级着色、选中联动教程、热力图色阶等技能养成应用的实战要点。

背景

宠物训练工具的核心是"看进度、学教程、记打卡":用进度列表展示坐下、趴下、握手、等待、召回、拒食六项技能的掌握度（按进度分级着色），点击某技能在教程卡看详细训练方法，并用热力图日历记录每天的训练强度。本页面在视觉上采用宠物训练营风格，草地绿主色（0xFF16A34A）配浅绿背景（0xFFF0FDF4）。结构上从上到下依次是：标题栏（带训练天数）、技能进度列表（每项含图标、名称、进度条、百分比，按完成度着色，可点击）、渐变教程卡（随选中技能显示训练技巧与建议），以及爪印热力图日历（用色阶深浅表示每日训练量）。其中技能进度按完成度分三档着色、日历用色阶表示强度，是进度可视化与热力图的典型示范。

Flutter × Harmony7.0 跨端开发介绍

在 HarmonyOS 7.0 上运行本页面，前提是使用 HarmonyOS 维护的定制版 Flutter SDK，因为鸿蒙对 Flutter 的支持是由 HarmonyOS 跨平台 SIG 通过 fork 扩展 Flutter SDK 实现的。

本页面是纯 Dart、无原生依赖的"可直接复用"场景，用到的 LinearProgressIndicator、Wrap、asMap、List.generate 全部来自 Framework 层与 Dart 标准库。训练打卡数据需要本地持久化（用鸿蒙的本地存储能力保存每日训练记录），训练提醒可借助鸿蒙的通知能力实现。本示例聚焦于进度展示、教程浏览与打卡可视化的交互层，数据是预设的，但页面的状态联动（点技能切教程）逻辑完整，对接本地存储后即可保存训练进度。

整页渲染经 Skia 借助鸿蒙 ArkUI RenderingContext 完成。经 AOT 编译后进度列表、热力图渲染流畅。

开发核心代码

第一部分：进度分级着色的技能列表。 每项技能按完成度映射为绿/黄/灰三档颜色：

..._skills.asMap().entries.map((e) {
  final i = e.key; final s = e.value;
  final p = s['progress'] as double;
  final color = p >= 1.0
      ? _trainPrimary               // 已掌握-绿
      : p > 0.5
          ? const Color(0xFFF59E0B)  // 进行中-黄
          : const Color(0xFF9CA3AF); // 起步-灰
  return GestureDetector(
    onTap: () => setState(() => _currentSkill = i),   // 点击切换当前技能
    child: Row(children: [
      Text(s['icon'] as String),
      Expanded(child: Column(children: [
        Text(s['name'] as String, style: TextStyle(color: color)),
        LinearProgressIndicator(value: p, color: color, minHeight: 3),  // 进度条
      ])),
      Text('${(p * 100).toInt()}%', style: TextStyle(color: color)),    // 百分比
    ]),
  );
})

技能按掌握度分三档着色：已掌握绿、进行中黄、起步灰。这种分级让用户一眼就能看出哪些技能学会了、哪些还在练、哪些刚开始。进度条 + 百分比双重展示掌握程度，点击某技能则更新 _currentSkill 切换教程卡。

第二部分：选中技能联动教程卡。 教程卡随 _currentSkill 显示对应技能的训练技巧：

Widget _tutorialCard() {
  final s = _skills[_currentSkill];   // 取当前选中的技能
  return Container(
    decoration: BoxDecoration(gradient: const LinearGradient(colors: [_trainPrimary, Color(0xFF15803D)])),
    child: Column(children: [
      Row(children: [Text(s['icon'] as String), const Text('今日训练项目')]),
      Text('💡 ${s['tip']}'),                            // 该技能的训练技巧
      Row(children: [
        _trainTag('🦴 零食奖励', Colors.white),
        _trainTag('⏱ 每次5分钟', Colors.white),
        _trainTag('🔄 重复10次', Colors.white),
      ]),
    ]),
  );
}

教程卡用 _skills[_currentSkill] 取当前选中技能的数据，显示它的训练技巧（tip）和训练建议标签。点击进度列表里的技能 → 更新 _currentSkill → 教程卡刷新显示对应教程，形成"列表选择驱动详情展示"的主从联动。这是列表 + 详情型界面的经典模式。

第三部分：爪印热力图日历的色阶映射。 打卡日历用色阶深浅表示每日训练量：

final _calendar = List.generate(22, (i) => i < 18 ? (i % 3 + 1) : 0);  // 模拟训练量数据
Wrap(spacing: 4, runSpacing: 4, children: List.generate(22, (i) {
  final v = _calendar[i];
  final color = v == 0
      ? const Color(0xFFF3F4F6)   // 0次-灰
      : v == 1
          ? const Color(0xFFDCFCE7)  // 1次-浅绿
          : v == 2
              ? const Color(0xFF86EFAC)  // 2次-中绿
              : const Color(0xFF16A34A); // 3次+-深绿
  return Container(
    width: (MediaQuery.of(context).size.width - 100) / 7, height: 24,
    decoration: BoxDecoration(color: color),
    child: Text('${i + 1}'),
  );
}))

热力图用颜色深浅表示每日训练强度：没训练灰、训练越多绿色越深。这种"色阶映射数值"的热力图是 GitHub 贡献图、习惯打卡的经典可视化——用户扫一眼颜色分布，就能看出自己的训练规律和坚持情况，深绿色越多说明越勤奋。List.generate(22, ...) 生成日历格子，用 (width - 100) / 7 算出每格宽度保证一行七天。

心得

做这个宠物训练页面，最大的收获是体会到进度分级着色对长期养成类应用的价值。训练六项技能，每项进度不同，如果都用一个颜色，用户很难快速分辨哪些学会了、哪些还在练。我按完成度把进度分成三档——已掌握绿、进行中黄、起步灰，用户扫一眼颜色就能把握整体进度：绿的不用管、黄的继续练、灰的要加把劲。这种分级着色把连续的进度值离散成几个有意义的状态，大大降低了认知负担。它和之前水质监测的绿黄红是同一思路，只不过这里编码的是"掌握程度"而非"健康状态"。我体会到，对于有多个项目、每个项目有进度的场景，按进度分级着色是帮用户快速把握全局的有效手段——比一堆百分比数字直观得多。

第二个体会是"列表选择驱动详情展示"的主从联动模式。技能进度列表是"主"，教程卡是"从"——点击列表里的某个技能，教程卡就显示该技能的详细教程。我用一个 _currentSkill 状态串联两者：列表项点击更新它、教程卡读取它。这种主从联动是"概览 + 详情"型界面的核心模式，邮件列表 + 正文、商品列表 + 详情、设置项 + 配置面板，都是它。它的精髓在于用一个"当前选中"的状态把列表和详情连起来，选择变化时详情自动更新。掌握了这个模式，各种需要"选一项、看详情"的界面就都能优雅实现。它和声明式 UI 的单向数据流完美契合——选中状态是真相来源，详情是它的投影。

第三个体会是热力图这种可视化对"坚持"的激励作用。训练打卡日历我用了热力图——每天训练越多，对应格子的绿色越深。这种可视化的妙处在于，它把"坚持"这件抽象的事变成了看得见的色块分布：一片深绿让用户直观感受到自己的努力和连续性，而中间的空白（灰格）则会刺激用户"别断了"。这正是 GitHub 贡献图广受欢迎的心理机制——用视觉化的坚持记录激励持续行动。从技术上看，热力图不过是按数值映射色阶的网格，但它承载的是"用可视化激励坚持"的产品智慧。这让我意识到，养成类应用的设计要善用这种"让坚持可视化"的手段，把用户的每一点努力都积累成看得见的成果，从而形成正反馈、驱动长期坚持。

总结

这个宠物训练进度追踪页面完整呈现了 Flutter 在 HarmonyOS 7.0 上构建技能养成型页面的标准做法：用进度分级着色让多项技能的掌握度一目了然，用 _currentSkill 状态实现技能列表与教程卡的主从联动，用色阶热力图可视化每日训练强度激励坚持。整个页面把"长期技能养成"处理得清晰而有激励性——分级着色降低了进度认知负担，主从联动让概览与详情顺畅切换，热力图让坚持看得见。这种范式对训练、学习、健身、习惯等各类需要"技能进度 + 打卡坚持"的养成类应用都有很强的复用价值。

从跨端落地的角度看，本页面是"纯 Dart、零适配"的典范。技能进度列表、教程卡、热力图日历全部使用 Flutter 内置组件，主从联动逻辑用纯 Dart 状态实现，因此切换到 HarmonyOS 提供的定制版 SDK 后即可在鸿蒙设备上直接复用，与 Android、iOS 共享同一套代码。需要针对鸿蒙处理的是数据层与提醒：训练打卡数据需对接鸿蒙的本地存储能力持久化，训练提醒可借助鸿蒙的通知能力实现。这正体现了 Flutter × HarmonyOS 处理养成类应用的特点：把进度展示、教程联动、热力图可视化用纯 Dart 跨端共享，把数据持久化与通知提醒交给适配鸿蒙的平台能力。对于技能养成类应用而言，把握好"展示交互层零适配、存储通知层对接鸿蒙"这一分工，并善用进度分级、主从联动、热力图这些经过验证的可视化模式，就能在鸿蒙生态里既高效复用界面，又交付出有激励性的养成体验，这是 Flutter × HarmonyOS 组合在养成类工具领域值得遵循的工程范式。