鸿蒙健身计划页面构建:一周训练表、营养目标、近期打卡与训练提示模块详解
前言
在 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 在多种业务场景中的灵活应用能力。