鸿蒙健身计划页面构建：动作清单与训练部位分布模块详解

前言

在 HarmonyOS 6.0 应用开发中，健身类页面的训练动作展示和训练部位分析是用户执行训练计划的核心参考模块。本文将以“健身计划”应用中的“动作清单”垂直列表模块和“训练部位分布”进度条网格为例，深入解析如何在鸿蒙平台上构建训练动作管理和训练部位分析界面。

背景

在健身管理场景中，用户需要了解每日训练的具体动作、组数次数，以及训练部位的训练强度分布。动作清单模块通过垂直列表展示哑铃卧推、坐姿划船、肩推、平板支撑四个动作的训练参数；训练部位分布模块在深色背景上通过2列网格展示胸、背、腿、核心四个部位的训练强度进度条。通过 HarmonyOS 6.0 的声明式 UI 框架，Column + Divider 可以构建动作列表，LinearProgressIndicator 配合网格可以展示部位训练分布。

HarmonyOS 6.0 跨端开发介绍（训练动作与部位篇）

HarmonyOS 6.0 的 ArkUI 框架在构建动作清单模块时，每个动作条目采用水平布局——左侧彩色图标容器、中间动作名称和参数、右侧无额外元素，条目之间用 Divider 分割线隔开。训练部位分布模块采用2列网格布局（宽高比2.05），每个卡片左侧显示部位名称大字号，右侧显示进度条。胸（78%）、背（52%）、腿（46%）、核心（64%）。

开发核心代码（分段解析）

模块一：动作清单模块的数据组织与垂直列表布局

动作清单模块首先通过 _buildTitle 显示“动作清单”主标题和“上肢日”训练日标识。下方通过 _buildExercise 方法连续构建四个动作，每个动作之间用 Divider 分割线隔开：

_buildExercise(theme, '哑铃卧推', '4 组 x 10 次 · 20kg', _green),
const Divider(height: 24, color: _line),
_buildExercise(theme, '坐姿划船', '4 组 x 12 次 · 中重量', _blue),
const Divider(height: 24, color: _line),
_buildExercise(theme, '肩推', '3 组 x 10 次 · 注意核心收紧', _orange),
const Divider(height: 24, color: _line),
_buildExercise(theme, '平板支撑', '4 组 x 45 秒', _purple),

四个动作覆盖了上肢训练的常见动作，每个包含组数、次数和负重信息。_buildExercise 方法采用 Row 水平布局：左侧42x42圆角图标容器（主题色12%透明背景，健身图标），中间弹性信息区域显示动作名称（深棕加粗）和训练参数（次要文字色，限制单行）。

模块二：训练部位分布模块的深色主题与网格布局

训练部位分布模块采用深绿背景（_deep），圆角24，标题区使用 _buildDarkTitle 显示“训练部位分布”主标题和“本周”时间标识。四个部位数据定义如下：

final items = [
  ('胸', 0.78, _green),
  ('背', 0.52, _blue),
  ('腿', 0.46, _orange),
  ('核心', 0.64, _purple),
];

网格布局配置2列、间距10像素、宽高比2.05。每个卡片采用白色9%透明度背景，圆角18，内边距13像素。卡片内部采用 Row 水平布局：左侧部位名称（主题色22像素加粗），右侧弹性进度条。进度条使用 LinearProgressIndicator，value 控制填充比例，背景色白色12%透明度，填充色为主题色。胸训练强度最高（78%），腿最低（46%）。

心得

通过实现动作清单和训练部位分布这两个模块，我总结出几点经验。第一，动作清单中四个动作覆盖了推类（哑铃卧推）、拉类（坐姿划船）、肩部（肩推）和核心（平板支撑），训练内容科学合理。第二，每个动作使用不同主题色（绿、蓝、橙、紫），通过颜色区分动作类型。第三，训练部位分布模块中胸的强度最高（78%），与上肢日的训练安排一致。第四，部位卡片中左侧大字号部位名称（22像素）与右侧进度条形成强弱对比，视觉效果醒目。第五，卡片背景使用白色9%透明度，比纯色背景更有层次感。最后需要强调的是，动作清单的训练参数应支持用户自定义调整，部位训练强度应基于训练日志动态计算。

总结

本文详细解析了“健身计划”应用中动作清单和训练部位分布两个核心模块的实现思路。动作清单模块通过垂直列表展示哑铃卧推、坐姿划船、肩推、平板支撑四个上肢训练动作，每个动作包含组数、次数和负重信息；训练部位分布模块在深色背景上通过2列网格展示胸（78%）、背（52%）、腿（46%）、核心（64%）四个部位的训练强度进度条。两个模块共同展示了 HarmonyOS 6.0 声明式 UI 在健身管理场景中的高效表达能力——动作清单实现训练计划可视化，部位分布实现训练强度分析。后续技术博客将聚焦于周计划、营养面板、打卡记录和训练提示等剩余模块的实现，敬请期待。