鸿蒙健身计划页面构建：训练英雄区与今日训练模块详解

前言

在 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 在健身管理场景中的高效表达能力。后续技术博客将聚焦于训练动作列表、肌肉热力地图、周计划、营养面板、打卡记录和训练提示等剩余模块的实现，敬请期待。