鸿蒙健身计划页面构建：训练英雄区与今日训练模块详解
前言
在 HarmonyOS 6.0 应用开发中，健身类页面的核心挑战在于如何展示训练进度、训练目标和实时数据。本文将以“健身计划”应用的主页面为例，深入解析如何在鸿蒙平台上构建健身管理类应用的首页。
背景
在健身管理场景中，用户需要了解本周训练完成度、今日训练内容以及各项训练数据。通过 HarmonyOS 6.0 的声明式 UI 框架，我们可以将健身英雄区、目标标签横向滚动、今日训练目标等模块聚合在一个滚动页面中。页面采用浅绿背景，与深绿英雄区形成视觉对比，传达健康活力的品牌调性。
HarmonyOS 6.0 跨端开发介绍（健身管理篇）
HarmonyOS 6.0 的 ArkUI 框架在构建健身类页面时，环形进度条配合Stack叠层可以清晰展示本周训练完成度（68%）。目标标签横向滚动展示增肌、减脂、拉伸、跑步、恢复五个训练目标。今日训练模块通过进度条展示力量容量、核心完成度、心率区间三项数据。整个页面以绿色为主色调，传达健康和活力。
开发核心代码（分段解析）
模块一：整体结构与主题配色定义
页面最外层是SearchPage类，继承自StatelessWidget。类顶部定义了12个颜色常量，背景色采用浅绿0xFFF1FAF4，深色文字用0xFF142820，主题深绿0xFF123326用于英雄区背景，搭配青柠色作为高亮色。页面使用ListView作为滚动容器，内边距左右18像素、底部32像素，每个模块之间用16或18像素间距分隔。
模块二：头部与健身英雄区的视觉设计
头部组件采用Row左右布局，左侧是标题“健身计划”和副标题“定制训练、体能追踪、每日打卡”，右侧是一个48x48圆角方形容器，深绿背景搭配青柠色健身图标。健身英雄区是整个页面的视觉重心，背景使用_deep深绿并搭配30像素大圆角。卡片顶部展示“塑形增肌·第4周”标签（青柠色半透明背景）和心率监测图标。中间区域左侧是环形进度条（68%完成度），右侧是今日训练内容“今天：上肢力量+核心稳定”和训练描述。底部三个指标卡片分别展示消耗486kcal、训练36min、连续12天，每个指标卡片背景为白色8%透明度。
模块三：目标标签横向滚动与今日训练模块
目标标签横向滚动列表高度固定48像素，五个目标依次为：增肌（绿色）、减脂（橙色）、拉伸（紫色）、跑步（蓝色）、恢复（青色）。今日训练模块采用白色面板，标题“今日训练目标”和“6项”标识。三个训练统计数据通过_buildWorkoutStat方法构建：
_buildWorkoutStat(theme,'力量容量',0.72,'1,280kg',_green),_buildWorkoutStat(theme,'核心完成度',0.58,'14 / 24 组',_orange),_buildWorkoutStat(theme,'心率区间',0.64,'燃脂 22min',_blue),每个统计项使用LinearProgressIndicator展示进度，上层显示标签和数值。
心得
通过实现健身计划页面的头部、健身英雄区和今日训练模块，我总结出几点经验。第一，环形进度条配合Stack叠层实现训练完成度可视化，68%完成度让用户直观了解本周进度。第二，今日训练内容区右侧环形进度条、左侧训练描述的左右布局，充分利用了卡片空间。第三，三个指标卡片展示消耗、训练时长和连续天数，覆盖用户最关心的训练数据。第四，目标标签横向滚动覆盖五种常见训练目标，用户可快速筛选。第五，今日训练模块的三个进度条（力量容量72%、核心完成度58%、心率区间64%）让用户了解各项训练的完成情况。最后需要强调的是，环形进度条的值（0.68）应基于真实完成数据动态计算，消耗和时长应同步更新。
总结
本文详细解析了“健身计划”应用首页中头部、健身英雄区和今日训练三个核心模块的实现思路。头部通过深绿图标容器强化品牌识别；健身英雄区展示本周训练完成度（68%环形进度条）和今日训练内容；目标标签横向滚动整合增肌、减脂、拉伸、跑步、恢复五个入口；今日训练模块通过三个进度条展示力量容量、核心完成度和心率区间数据。整个页面展示了 HarmonyOS 6.0 声明式 UI 在健身管理场景中的高效表达能力。后续技术博客将聚焦于训练动作列表、肌肉热力地图、周计划、营养面板、打卡记录和训练提示等剩余模块的实现，敬请期待。
