当前位置：首页 > news >正文

基于 Harmony 6.0 应用的健身训练计划生成器实现

news 2026/6/13 17:34:27

基于 Harmony 6.0 应用的健身训练计划生成器实现

前言

健身的最大门槛不是不想动，而是不知道动什么——胸肌怎么练、增肌该怎么吃、跟着 YouTube 视频会不会练错动作。一款好的健身训练计划应用要把"今日训练 / 计划进度 / 动作示范 / 体型变化"四件事在一屏内全部铺到。Harmony 6.0 时代，健身类应用迎来了几个独特的能力红利——HealthKit 让训练消耗自动同步、SensorKit 让动作计数（俯卧撑、深蹲）端侧识别、AVCodecKit 提供高清视频示范、超级终端让示范视频投到智慧屏。本文用 Flutter 在 Harmony 6.0 上实现一个健身计划首页。

背景

健身类应用的视觉关键词是"动感、专业、激励"——黑色背景配橙色 #F97316 强调肌肉感。本项目首页 5 个模块：渐变 Header（今日训练 + 大开始按钮）、本周计划网格、推荐动作横滑、体型变化对比卡、训练时长统计。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在健身类应用上的能力栈完整——HealthKit 提供卡路里消耗追踪、SensorKit 提供动作计数、AVCodecKit 提供视频解码、超级终端让视频投屏到智慧屏、AI 助手能力提供动作纠正。Skia 引擎对深色 + 橙色高亮的渲染极其有力量感。

开发核心代码

代码一：今日训练 Header

Widget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[Color(0xFF18181B),_primary],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(24),),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Icon(Icons.fitness_center,color:Colors.white,size:22),SizedBox(width:8),Text('健身计划',style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Container(padding:EdgeInsets.symmetric(horizontal:8,vertical:3),decoration:BoxDecoration(color:_primary,borderRadius:BorderRadius.all(Radius.circular(6))),child:Text('Day 18 / 90',style:TextStyle(color:Colors.white,fontSize:11,fontWeight:FontWeight.w800)),),]),constSizedBox(height:14),constText('今日 · 推胸日',style:TextStyle(color:Colors.white70,fontSize:13)),constSizedBox(height:4),constText('卧推 + 飞鸟 + 双杠臂屈伸',style:TextStyle(color:Colors.white,fontSize:22,fontWeight:FontWeight.w900)),constSizedBox(height:6),constText('共 12 组动作 · 预计 65 分钟',style:TextStyle(color:Colors.white70,fontSize:12)),constSizedBox(height:14),Container(width:double.infinity,height:50,decoration:BoxDecoration(color:_primary,borderRadius:BorderRadius.circular(25),boxShadow:[BoxShadow(color:_primary.withValues(alpha:0.5),blurRadius:12,offset:constOffset(0,4))]),child:constCenter(child:Row(mainAxisSize:MainAxisSize.min,children:[Icon(Icons.play_arrow,color:Colors.white,size:24),SizedBox(width:6),Text('开始训练',style:TextStyle(color:Colors.white,fontSize:16,fontWeight:FontWeight.w800)),],)),),],),);}

开始训练后 SensorKit 自动记录每个动作的次数和组间休息——通过加速度计算下蹲、俯卧撑等动作的数量，无需用户手动计数。

从「今日训练 Header」的健身激励与目标驱动设计角度再补一段。健身训练类应用的 Header 必须传递「现在就开始训练」的能量感。这段 Header 用主橙色到深橙的渐变背景，橙色传递「能量、活力、行动力」的氛围，配合「今日 · 全身燃脂 30min」标题 + 「开始训练」大按钮的双段式排版，让用户感受到「不动的话就浪费今天了」的心理推力。如果未来要支持「跳过今天」「调整难度」，可以在 Header 加两个辅助 chip 按钮，骨架不变。鸿蒙 6.0 的 SensorKit 在动作识别上的精度极高，比传统 Android 智能手表的计步算法更准确。

代码二：本周计划网格

Widget_weekPlan(){finalitems=const[['一','推胸',_primary,true],['二','练背',_accent,true],['三','休息',_sub,false],['四','腿日',_green,true],['五','肩臂',_purple,false],['六','核心',_cyan,false],['日','休息',_sub,false],];returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:constColor(0xFF1F2937),borderRadius:BorderRadius.circular(16)),child:Row(mainAxisAlignment:MainAxisAlignment.spaceBetween,children:items.map((it){finalc=it[2]asColor;finaldone=it[3]asbool;returnColumn(children:[Container(width:38,height:38,decoration:BoxDecoration(color:done?c:c.withValues(alpha:0.16),borderRadius:BorderRadius.circular(10)),alignment:Alignment.center,child:Icon(done?Icons.check:Icons.fitness_center,color:done?Colors.white:c,size:18),),constSizedBox(height:6),Text(it[0]asString,style:constTextStyle(color:Colors.white,fontSize:11,fontWeight:FontWeight.w700)),constSizedBox(height:2),Text(it[1]asString,style:TextStyle(color:c,fontSize:10)),]);}).toList()),);}

本周计划用 7 列展示一周训练计划，每列对应一天 + 训练主题 + 完成状态。已完成的格子用主色实心填充、未完成的用浅色空心，让用户一眼识别本周的训练打卡情况。

从「本周计划网格」的健身打卡心理与连续性设计角度再补一段。健身训练的核心留存机制是「计划 + 打卡」——用户一旦看到自己的训练计划被完整执行，就会有「这周不能断」的心理压力。每天的训练主题（胸肌、背部、腿部、有氧、休息）用不同色相 chip 标注，让用户能快速识别「今天该练什么」。如果未来要扩展支持「计划生成器」（让 AI 根据用户目标自动生成 7 天计划），可以接入鸿蒙 6.0 的 NeuralNetworkRuntime 端侧推理，根据用户的体重、目标、可用时间生成个性化计划，整个推理过程不到 100ms。

代码三：推荐动作横滑

SizedBox(height:150,child:ListView.separated(scrollDirection:Axis.horizontal,itemCount:actions.length,separatorBuilder:(_,__)=>constSizedBox(width:10),itemBuilder:(_,i){finala=actions[i];returnContainer(width:130,padding:constEdgeInsets.all(10),decoration:BoxDecoration(color:constColor(0xFF1F2937),borderRadius:BorderRadius.circular(14)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Container(height:70,decoration:BoxDecoration(color:_primary.withValues(alpha:0.18),borderRadius:BorderRadius.circular(8)),child:Center(child:Icon(a['icon']asIconData,color:_primary,size:32)),),constSizedBox(height:8),Text(a['name']asString,style:constTextStyle(color:Colors.white,fontSize:13,fontWeight:FontWeight.w700)),constSizedBox(height:4),Text('${a['sets']} 组 × ${a['reps']} 次',style:constTextStyle(color:Colors.white60,fontSize:11)),],),);},),)

每个动作点击后通过 AVCodecKit 播放高清示范视频，超级终端让视频可投到智慧屏大画面，方便练习时看清动作要领。

从「推荐动作横滑」的视频化教学与多端流转设计角度再补一段。健身动作的关键是「正确做」——用户必须看清示范视频才能做到位。这段横滑卡片用「动作缩略图 + 动作名 + 难度 chip + 持续时间 + 播放按钮」五段信息塞在每张卡片里。每张卡固定 130 像素宽，配合外层 SizedBox(height: 180) 锁定高度，形成稳定横滑节奏。如果未来要扩展支持「按部位筛选」（核心、上肢、下肢、全身），可以在横滑列表上方加 chip 切换栏，鸿蒙 6.0 的 AVCodecKit 对视频流的拉起延时小于 300ms，配合超级终端的"流转"能力，用户在手机点视频后可以一键投到智慧屏继续看，这是 Android 平台难以企及的体验红利。

心得

健身类 App 的视觉灵魂是"力量 + 激励"——黑底配橙色给力量感，进度网格给打卡激励。开发时最容易犯的错是把训练动作做得过于详尽，反而让用户在练习过程中分心。我的策略是把"开始训练"按钮做成最大最显眼的入口，让用户进 App 后 1 秒就能开始。从能力扩展角度，健身应用最值得在鸿蒙端打造的是"SensorKit 动作计数 + AVCodecKit 视频示范 + 超级终端投屏 + HealthKit 卡路里同步"四件套。

总结

本篇实现了 Harmony 6.0 端的健身训练首页，5 个模块、纯 UI、零依赖、约 320 行代码。从扩展角度建议生产业务里：把动作计数接入 SensorKit；把训练视频接入 AVCodecKit；把投屏接入超级终端；把卡路里接入 HealthKit；把"今日训练"做成 FormExtensionAbility 桌面卡片。下一篇是第十二组的最后一块——中医体质测评应用。

查看全文

http://www.rkmt.cn/news/1476792.html