减脂/增肌计划:AI 智能健身训练系统的鸿蒙实现
一、引言
健身训练计划的制定是一项专业性很强的工作。不同的目标(减脂 vs 增肌)、不同的训练水平(新手 vs 进阶)、不同的训练频率(每周1-7天),都需要完全不同的训练方案。一个新手如果直接使用进阶训练计划,容易受伤;而进阶者如果一直使用新手计划,则无法突破平台期。
"减脂/增肌计划"正是为解决这一问题而设计的鸿蒙原生AI应用。用户输入身高体重、选择目标、训练天数和训练级别,AI便能生成完整的周训练计划表,包含每日训练动作、饮食原则和需跟踪的进度指标。本文将深入解析该应用的鸿蒙技术实现、AI训练算法和交互设计。
二、应用架构设计
2.1 整体架构
应用遵循鸿蒙标准的MVVM架构:
- Model层(FitnessPlanModel.ets):定义
WeeklyDay(每日训练)、FitnessPlanData(完整计划)等数据模型,以及目标、级别等常量配置。 - View层(FitnessPlanPage.ets):基于ArkTS声明式UI构建,使用
@State管理身高、体重、目标、天数、级别等5个表单状态。 - Service层(FitnessPlanService.ets):封装4组预设训练方案(减脂新手/进阶、增肌新手/进阶),包含42个动作的完整动作库。
2.2 数据模型
FitnessPlanData ├── weekly: WeeklyDay[] // 周训练计划 │ ├── day: string // 星期 │ ├── focus: string // 训练重点 │ └── exercises: string[] // 训练动作列表 ├── diet_rules: string[] // 饮食原则 └── metrics: string[] // 需跟踪指标三、鸿蒙技术深度解析
3.1 Stepper 步进器——训练天数的精确控制
训练天数选择使用加减按钮实现步进器(Stepper)效果,这是鸿蒙开发中常见的交互模式:
Row(){Button('-').fontSize(16).width(36).height(36).backgroundColor(COLOR_BORDER).borderRadius(18).onClick(()=>{if(this.selectedDays>1){this.selectedDays--}})Text(`${this.selectedDays}`).fontSize(18).fontWeight(FontWeight.Bold).margin({left:16,right:16})Button('+').fontSize(16).width(36).height(36).backgroundColor(COLOR_BORDER).borderRadius(18).onClick(()=>{if(this.selectedDays<7){this.selectedDays++}})}.width('100%').justifyContent(FlexAlign.Center)设计要点:
- 按钮采用圆形设计(
borderRadius(18)),视觉上更友好 - 边界检查确保天数在1-7之间,避免无效值
FlexAlign.Center居中布局,符合移动端操作习惯- 当前值在中间显示,且使用加粗字体突出
3.2 Flex 弹性布局——训练级别的胶囊选择
训练级别选择采用Flex弹性布局实现胶囊式选择器:
@BuilderbuildSection(title:string,items:string[],selected:string,onClick:(item:string)=>void){Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.Start}){ForEach(items,(item:string)=>{Text(item)// 选中态与未选中的差异化样式.fontWeight(selected===item?FontWeight.Bold:FontWeight.Normal).fontColor(selected===item?COLOR_PRIMARY:COLOR_TEXT).backgroundColor(selected===item?COLOR_SELECTED_BG:COLOR_CARD).borderRadius(16).border({width:1,color:selected===item?COLOR_PRIMARY:COLOR_BORDER}).onClick(()=>{onClick(item)})})}}胶囊式选择器在移动端具有天然的优势:触摸面积大(padding 14px)、视觉反馈清晰(颜色+边框+字体粗细三重变化)、自适应布局(FlexWrap.Wrap自动换行)。
3.3 @Builder 构建复杂结果卡片——周训练计划表
buildResultCard是本应用最复杂的@Builder组件,它展示了三层嵌套的ForEach循环:
@BuilderbuildResultCard(data:FitnessPlanData){Column(){Text('📅 周训练计划').fontSize(18)...// 第一层 ForEach:遍历每一天ForEach(data.weekly,(day:WeeklyDay,idx:number)=>{Column(){Row(){/* 星期标签 + 训练重点 */}// 第二层 ForEach:遍历当天的训练动作ForEach(day.exercises,(ex:string)=>{Text(`•${ex}`)})}// 卡片样式})Divider()...Text('🍎 饮食原则')...// 第三层 ForEach:遍历饮食原则ForEach(data.diet_rules,(rule:string)=>{Text(`🍽️${rule}`)})Divider()...Text('📊 需跟踪指标')...ForEach(data.metrics,(metric:string)=>{Text(`📈${metric}`)})}}三层ForEach的嵌套使用,展示了鸿蒙框架在处理复杂列表数据时的强大能力。每个层级的渲染都是独立的,当数据变化时仅重渲染受影响的层级。
3.4 多 TextInput 输入管理
应用包含两个 TextInput 组件(身高和体重),采用统一的样式和布局模式:
TextInput({text:this.selectedHeight,placeholder:'请输入身高,如 175'}).fontSize(14).fontColor(COLOR_TEXT).placeholderColor(COLOR_TEXT_SEC).backgroundColor(COLOR_CARD).borderRadius(12).border({width:1,color:COLOR_BORDER}).padding(12).margin({left:16,right:16,top:4,bottom:8}).onChange((val:string)=>{this.selectedHeight=val})两个 TextInput 保持一致的视觉风格,降低用户的认知负担。placeholder中的示例值(如"175")提示用户输入格式,提高了数据输入的准确性。
3.5 红色主题与力量感
应用采用红色主题(#EF4444),红色在色彩心理学中代表力量、激情和能量,与"健身训练"的应用场景高度契合。背景色#FEF2F2是浅红色,营造出充满活力的视觉氛围。
四、AI应用亮点分析
4.1 4组预设方案,覆盖核心训练场景
应用提供4组精心设计的训练方案,覆盖了最主流的健身目标:
| 方案 | 目标 | 级别 | 训练天数 | 适合人群 |
|---|---|---|---|---|
| 减脂新手 | 减脂 | 新手 | 3天 | 刚开始减肥的健身小白 |
| 减脂进阶 | 减脂 | 进阶 | 5天 | 有一定基础的减脂人群 |
| 增肌新手 | 增肌 | 新手 | 3天 | 刚开始增肌的初学者 |
| 增肌进阶 | 增肌 | 进阶 | 5天 | 有训练经验的增肌人群 |
4.2 42个动作的完整动作库
应用内置了42个训练动作,涵盖:
- 推类动作:杠铃卧推、哑铃肩推、上斜哑铃卧推等
- 拉类动作:引体向上、杠铃划船、高位下拉等
- 腿部动作:杠铃深蹲、罗马尼亚硬拉、腿举等
- 核心动作:平板支撑、卷腹、悬垂举腿等
- 有氧动作:跳绳、波比跳、战绳、HIIT等
- 辅助动作:二头弯举、三头臂屈伸、侧平举等
4.3 周表自动编排逻辑
训练计划的编排遵循科学健身原则:
减脂新手(3天/周):
- 周一:全身燃脂(复合动作+有氧)
- 周三:核心+有氧(核心训练+HIIT)
- 周五:下半身+HIIT(下肢力量+高强度间歇)
增肌进阶(5天/周):
- 周一:胸+三头(大重量)
- 周二:背+二头(大重量)
- 周四:肩部专项
- 周五:腿部(大重量)
- 周六:弱项补强+有氧
这种编排确保了推/拉/腿的均衡发展,以及大肌肉群与小肌肉群的配合训练。
4.4 饮食原则与进度指标
每个方案都包含配套的饮食原则和进度指标:
减脂新手饮食原则:
- 少食多餐,每天5餐
- 每餐保证蛋白质摄入
- 戒糖戒油炸食品
- 每天饮水2L以上
增肌进阶需跟踪指标:
- 体重(每日)
- 三大项重量
- 各部位围度(每月)
- 体脂率(每月)
- 训练日志记录
五、关键技术挑战与解决方案
5.1 挑战一:多维度参数组合
问题:应用需要同时管理身高、体重、目标、天数、级别5个输入参数,且"生成按钮"的可用性取决于目标和级别两个参数。
解决方案:使用条件组合判断:
if(this.selectedGoal!==''&&this.selectedLevel!==''){Text('生成训练计划').onClick(()=>{this.onGenerate()})}即使身高和体重未填写,用户也可以生成计划(因为身高体重主要用于显示,AI方案基于目标和级别预设)。这种设计降低了使用门槛。
5.2 挑战二:训练动作的格式化展示
问题:每个训练动作包含动作名称、组数、次数三个维度,如何清晰展示?
解决方案:使用统一格式动作名称 组数×次数,如"杠铃卧推 5组×5次"。这种格式简洁明了,组数和次数的视觉区分通过字体粗细实现。
5.3 挑战三:信息层级过多时的视觉组织
问题:结果卡片包含周计划、饮食原则、进度指标三大部分,信息量较大。
解决方案:使用Divider分割线配合层级标题(如"📅 周训练计划"、“🍎 饮食原则”、“📊 需跟踪指标”)进行视觉分区,每个区块内部使用列表展示,确保信息层级清晰。
六、用户体验设计
6.1 分步填写的表单设计
用户按照"身高 → 体重 → 目标 → 天数 → 级别"的顺序逐步填写,每一步的UI组件都带有明确的图标和标题引导。这种分步设计避免了信息过载,让用户能够专注于当前输入。
6.2 实时反馈的天数选择
训练天数选择区域同时显示当前值(“3天”)和步进器,用户每次点击加减按钮都能看到数字实时变化,操作反馈即时。
6.3 结果卡片的分区设计
结果卡片被分为三个视觉分区:
- 周训练计划:每个训练日是一个独立的卡片,包含星期标签、训练重点和动作列表
- 饮食原则:以列表形式展示,每条原则前带有 🍽️ 图标
- 需跟踪指标:以列表形式展示,每条指标前带有 📈 图标
6.4 重置功能的一键恢复
重置按钮在用户有输入时显示,点击后一键恢复所有状态到初始值,包括消息记录、输入数据和结果数据。
七、总结
减脂/增肌计划应用充分利用了鸿蒙ArkTS框架的特性,通过@State管理5个表单状态的响应式变化、@Builder构建三层嵌套的复杂结果卡片、Flex实现自适应的胶囊选择器,以及Stepper步进器实现精确的天数控制。
在AI应用层面,应用内置了4组科学训练方案和42个动作的完整动作库,覆盖了减脂/增肌、新手/进阶的四大核心场景。每个方案都包含训练计划、饮食原则和进度指标三大模块,为用户提供了一站式的健身解决方案。未来可以进一步扩展AI能力,如根据用户历史数据动态调整训练计划、集成动作视频演示、以及社交化训练打卡功能。
技术栈:HarmonyOS ArkTS | 声明式UI | @State | @Builder | ForEach | Flex | Stepper
应用类型:AI + 健身
适用场景:减脂训练、增肌训练、健身计划制定