鸿蒙健身计划页面构建：一周训练表、营养目标、近期打卡与训练提示模块详解

前言

在 HarmonyOS 6.0 应用开发中，健身类页面的周计划安排、营养管理和打卡记录是用户持续坚持训练的重要辅助模块。本文将以“健身计划”应用中的“一周训练表”日历模块、“营养目标”数据卡片、“近期打卡”记录列表和“训练提示”免责声明为例，深入解析如何在鸿蒙平台上构建完整的健身管理界面。

背景

在健身管理场景中，用户需要了解一周的训练安排（分化训练）、每日营养摄入目标，以及历史打卡记录。一周训练表模块通过7列水平网格展示周一到周日的训练部位；营养目标模块通过2x2网格展示蛋白质、饮水、热量缺口、睡眠四个数据；近期打卡模块展示三条历史打卡记录。通过 HarmonyOS 6.0 的声明式 UI 框架，日历网格、统计卡片和时间线列表可以高效实现这些功能。

HarmonyOS 6.0 跨端开发介绍（周计划与营养篇）

HarmonyOS 6.0 的 ArkUI 框架在构建一周训练表模块时，使用7列 Row + Expanded 等宽布局，每个日期卡片显示星期和训练部位，背景色为主题色10%透明度。营养目标模块使用绿色主题卡片，通过2x2网格展示蛋白质（96g）、饮水（2.1L）、热量缺口（320kcal）、睡眠（7.5h）。近期打卡模块采用垂直列表展示打卡记录，包含时间、训练标题和完成情况。

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

模块一：一周训练表的7列水平布局与数据组织

一周训练表模块通过 _buildTitle 显示“一周训练表”主标题和“定制版”标识。七天训练安排定义如下：

final days = [
  ('一', '腿', _orange), ('二', '休', _teal), ('三', '胸', _green),
  ('四', '背', _blue), ('五', '肩', _purple), ('六', '有氧', _rose),
  ('日', '拉伸', _teal),
];

水平布局使用 Row + map 遍历生成7个日期卡片，每个卡片使用 Expanded 等宽分布，左右外边距3像素，垂直内边距11像素。背景色为主题色10%透明度，圆角15。卡片内部垂直列显示星期（主题色加粗）和训练部位（深棕加粗，字号12，限制单行）。周二为休息日（茶色），其他为训练日。

模块二：营养目标模块的绿色主题与数据网格

营养目标模块采用青柠色主题（_lime 22%透明度背景加42%透明度边框），圆角24。标题区使用餐饮图标加“营养目标”文字。四个营养数据通过2x2网格展示：

Row(
  children: [
    Expanded(child: _buildNutritionBox(theme, '蛋白质', '96g')),
    const SizedBox(width: 10),
    Expanded(child: _buildNutritionBox(theme, '饮水', '2.1L')),
  ],
),
const SizedBox(height: 10),
Row(
  children: [
    Expanded(child: _buildNutritionBox(theme, '热量缺口', '320kcal')),
    const SizedBox(width: 10),
    Expanded(child: _buildNutritionBox(theme, '睡眠', '7.5h')),
  ],
)

_buildNutritionBox 方法返回白色76%透明度背景卡片，内部垂直列显示数值（深棕加粗大字号）和标签（次要文字色）。

模块三：近期打卡模块的垂直列表与打卡记录

近期打卡模块通过 _buildTitle 显示“近期打卡”主标题和“时间倒序”排序说明。三条打卡记录通过 _buildRecord 方法构建，每条之间用 Divider 分割线隔开：

_buildRecord(theme, '今天 07:40', '上肢力量训练', '完成 5 / 6 项', _green),
const Divider(height: 24, color: _line),
_buildRecord(theme, '昨天 20:30', '低强度有氧', '跑步 32 分钟', _blue),
const Divider(height: 24, color: _line),
_buildRecord(theme, '周二 18:10', '腿部力量日', '深蹲 5 组', _orange),

_buildRecord 方法采用 Row 水平布局：左侧44x44圆角图标容器（主题色12%透明背景，完成图标），中间弹性信息区显示训练标题和时间描述（合并为一行：“今天 07:40 · 完成 5 / 6 项”）。

模块四：训练提示模块的玫瑰色主题与免责声明

训练提示模块采用玫瑰色主题（_rose 10%透明度背景加24%透明度边框），圆角22。布局采用 Row 水平布局，左侧是信息轮廓图标（玫瑰色30像素），右侧是弹性文本区域。文本内容为“训练提示：页面为静态 UI 示例。真实训练计划应结合个人身体状况、运动经验和专业指导调整”，行高1.48，字重800加粗。

心得

通过实现一周训练表、营养目标、近期打卡和训练提示这四个模块，我总结出几点经验。第一，一周训练表采用分化训练安排（腿、胸、背、肩、有氧、拉伸），周二休息，符合科学健身规律。第二，营养目标模块覆盖了蛋白质、饮水、热量缺口和睡眠四个维度，是健身用户最关注的营养数据。第三，近期打卡记录按时间倒序排列，最新的打卡在最上方，符合用户查看习惯。第四，打卡描述合并了时间和完成情况为一行，节省了垂直空间。第五，训练提示模块使用玫瑰色（偏红但柔和），比红色警告更加友善。最后需要强调的是，营养目标数值应基于用户的体重、运动量和目标动态计算，一周训练表应支持用户自定义编辑。

总结

本文详细解析了“健身计划”应用中一周训练表、营养目标、近期打卡和训练提示四个模块的实现思路。一周训练表模块通过7列水平网格展示周一到周日的训练安排（腿、休、胸、背、肩、有氧、拉伸）；营养目标模块通过2x2网格展示蛋白质（96g）、饮水（2.1L）、热量缺口（320kcal）、睡眠（7.5h）四个数据；近期打卡模块展示三条历史打卡记录（上肢力量训练、低强度有氧、腿部力量日）；训练提示模块以玫瑰色主题卡片承载免责声明。至此，“健身计划”应用的11个模块已全部解析完毕。整个系列文章展示了 HarmonyOS 6.0 声明式 UI 在多种业务场景中的灵活应用能力。