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

鸿蒙健身计划页面构建一周训练表、营养目标、近期打卡与训练提示模块详解前言在 HarmonyOS 6.0 应用开发中健身类页面的周计划安排、营养管理和打卡记录是用户持续坚持训练的重要辅助模块。本文将以“健身计划”应用中的“一周训练表”日历模块、“营养目标”数据卡片、“近期打卡”记录列表和“训练提示”免责声明为例深入解析如何在鸿蒙平台上构建完整的健身管理界面。背景在健身管理场景中用户需要了解一周的训练安排分化训练、每日营养摄入目标以及历史打卡记录。一周训练表模块通过7列水平网格展示周一到周日的训练部位营养目标模块通过2x2网格展示蛋白质、饮水、热量缺口、睡眠四个数据近期打卡模块展示三条历史打卡记录。通过 HarmonyOS 6.0 的声明式 UI 框架日历网格、统计卡片和时间线列表可以高效实现这些功能。HarmonyOS 6.0 跨端开发介绍周计划与营养篇HarmonyOS 6.0 的 ArkUI 框架在构建一周训练表模块时使用7列RowExpanded等宽布局每个日期卡片显示星期和训练部位背景色为主题色10%透明度。营养目标模块使用绿色主题卡片通过2x2网格展示蛋白质96g、饮水2.1L、热量缺口320kcal、睡眠7.5h。近期打卡模块采用垂直列表展示打卡记录包含时间、训练标题和完成情况。开发核心代码分段解析模块一一周训练表的7列水平布局与数据组织一周训练表模块通过_buildTitle显示“一周训练表”主标题和“定制版”标识。七天训练安排定义如下finaldays[(一,腿,_orange),(二,休,_teal),(三,胸,_green),(四,背,_blue),(五,肩,_purple),(六,有氧,_rose),(日,拉伸,_teal),];水平布局使用Rowmap遍历生成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 在多种业务场景中的灵活应用能力。