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

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

前言

在 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显示“一周训练表”主标题和“定制版”标识。七天训练安排定义如下：

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

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

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

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

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

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

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

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

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

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

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

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

心得

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

总结

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