news 2026/5/24 23:45:15

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
鸿蒙健身计划页面构建:一周训练表、营养目标、近期打卡与训练提示模块详解

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

前言

在 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 在多种业务场景中的灵活应用能力。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/24 23:42:51

丈母娘只要第一眼看不上女婿,即使后面结婚了,大概率也会一直看不上,大家觉得对吗?——为什么有些丈母娘总是挑女婿的不是,没事就发货大吼?——

很多家庭里,确实存在这种现象,但“第一眼看不上=一辈子看不上”,并不是绝对规律。 丈母娘对女婿的第一印象往往很强,因为她看的不是单纯“喜不喜欢”,而是: 这个男人靠不靠谱 能不能让女儿过得稳定 性格是否成熟 家庭背景、经济能力、处事方式是否安心 对女儿有没有…

作者头像 李华
网站建设 2026/5/24 23:42:44

2026.5.24-要闻

宁波大学附属康宁医院李广学副主任医师指出,每天刷手机超5小时会显著增加肥胖风险(儿童群体风险增幅达74%),并导致前额叶等脑区代谢减弱,引发注意力、记忆力下降。‌‌1 8小时前

作者头像 李华
网站建设 2026/5/24 23:42:43

现在才发现,在这个社会上,只有妈妈会无条件的包容自己,其他人都不会?

你现在这个感受,往往是在经历了一些人际失望、婚姻压力或者被误解之后,很容易冒出来的。 因为你会突然发现: 外人会权衡利益 有的人会挑刺 有的人会翻脸 有的人不会真正心疼你 你委屈时,也未必有人站你这边 相比之下,很多人会觉得: 还是妈妈最容易无条件接纳自己。…

作者头像 李华
网站建设 2026/5/24 23:31:17

线上获客选SEO还是GEO优化

这是很多企业决策者面临的现实选择题。营销预算有限,人力有限,到底是继续做传统SEO,还是转向GEO?答案是:不需要“二选一”,而要根据企业的阶段和资源状况,决定“以谁为主、谁为辅助”&#xff0…

作者头像 李华
网站建设 2026/5/24 23:27:14

H2控制台CVE-2021-42392漏洞深度解析:JDBC注入与静默RCE

1. 这个漏洞不是“能连上数据库”那么简单,而是绕过所有认证直通控制台H2数据库控制台漏洞、CVE-2021-42392、JDBC注入——这三个词凑在一起,很多人第一反应是:“哦,又一个数据库未授权访问”。但我在实际渗透测试和内部红蓝对抗中…

作者头像 李华
网站建设 2026/5/24 23:25:11

Flutter国际化与本地化完全指南

Flutter国际化与本地化完全指南 引言 国际化是构建全球化应用的关键环节,Flutter提供了完善的国际化支持。本文将深入探讨Flutter中的国际化和本地化技术。 一、基础配置 1.1 添加依赖 dependencies:flutter_localizations:sdk: flutterintl: ^0.18.11.2 更新main.d…

作者头像 李华