减脂/增肌计划：AI 智能健身训练系统的鸿蒙实现

tyqtyq22

220人浏览 · 2026-07-09 07:54:45

tyqtyq22 · 2026-07-09 07:54:45 发布

减脂/增肌计划：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 弹性布局实现胶囊式选择器：

@Builder
buildSection(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 循环：

@Builder
buildResultCard(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能力，如根据用户历史数据动态调整训练计划、集成动作视频演示、以及社交化训练打卡功能。