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

基于 Harmony 6.0 应用的跑步配速教练应用首页实现

news 2026/6/6 23:18:01

基于 Harmony 6.0 应用的跑步配速教练应用首页实现

前言

跑步是最简单也最难的运动——简单是因为穿上鞋就能跑，难是因为配速、心率、步频都需要科学控制。一款好的跑步配速教练应用要把"今天的训练 / 实时配速 / 目标心率 / 完赛预测"四件事在一屏内全部铺到。Harmony 6.0 时代，跑步类应用迎来了几个独特的能力红利——LocationKit 提供米级 GPS、SensorKit 提供加速度和心率、HealthKit 让数据进入系统级档案、AudioKit 提供配速语音播报、超级终端让手表显示实时数据、AI 助手能力提供训练建议。本文用 Flutter 在 Harmony 6.0 上实现一个跑步教练首页。

背景

跑步类应用的视觉关键词是"动感、激励、专业"——蓝青色 #06B6D4 配橙色 #F97316 是这类应用的合适主色。本项目首页 5 个模块：渐变 Header（今日目标 + 大开始按钮）、本周配速趋势、推荐训练计划、最近跑步记录、好友 PK 排行。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在跑步类应用上的能力栈完整——LocationKit 提供 GPS 轨迹、SensorKit 提供步频心率、HealthKit 提供数据归集、AudioKit 提供配速播报、AI 助手提供训练建议、超级终端让手表协同。

开发核心代码

代码一：今日目标 Header

Widget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,Color(0xFF155E75)],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(24),),child:Column(children:[constRow(children:[Icon(Icons.directions_run,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:_accent,borderRadius:BorderRadius.all(Radius.circular(6))),child:Text('训练 Day 18',style:TextStyle(color:Colors.white,fontSize:11,fontWeight:FontWeight.w800)),),]),constSizedBox(height:16),constText('今日训练',style:TextStyle(color:Colors.white70,fontSize:13)),constSizedBox(height:4),constText('5 km 间歇跑',style:TextStyle(color:Colors.white,fontSize:28,fontWeight:FontWeight.w900)),constSizedBox(height:8),constRow(mainAxisAlignment:MainAxisAlignment.center,children:[_MiniChip(label:'配速',value:"5'30\""),SizedBox(width:10),_MiniChip(label:'心率',value:'150 bpm'),SizedBox(width:10),_MiniChip(label:'步频',value:'180'),]),constSizedBox(height:16),Container(width:double.infinity,height:50,decoration:BoxDecoration(color:_accent,borderRadius:BorderRadius.circular(25)),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)),],)),),]),);}class_MiniChipextendsStatelessWidget{finalStringlabel,value;const_MiniChip({requiredthis.label,requiredthis.value});@overrideWidgetbuild(BuildContextcontext){returnContainer(padding:constEdgeInsets.symmetric(horizontal:10,vertical:6),decoration:BoxDecoration(color:Colors.white.withValues(alpha:0.18),borderRadius:BorderRadius.circular(10)),child:Column(children:[Text(label,style:constTextStyle(color:Colors.white70,fontSize:10)),constSizedBox(height:2),Text(value,style:constTextStyle(color:Colors.white,fontSize:12,fontWeight:FontWeight.w800)),]),);}}

跑步过程中 AudioKit 实时语音播报配速——“配速 5 分 32 秒，比目标快 2 秒”，让用户无需看屏幕就能调整。

从「今日目标 Header」的运动激励与目标可视化设计角度再补一段。跑步配速类应用的 Header 必须传递「我的目标 + 现在就出发」的双重激励。这段 Header 用主蓝色到深蓝的渐变背景，配合「今日目标 5km / 配速 5’30"」+ 「开始跑步」大按钮的双段式排版，让用户感受到「目标明确、立即行动」的推力。「开始跑步」按钮做成纯白色实心 + 主色文字的胶囊形态，是整页最显眼的视觉锚点。如果未来要扩展支持「按时段切换目标」（早跑短距离热身、晚跑长距离训练），可以在 Header 顶部加 chip 切换栏，骨架不变。

代码二：本周配速趋势

Widget_paceChart(){finalpaces=const[340,332,328,335,325,322,330];finalmaxVal=paces.reduce((a,b)=>a>b?a:b);returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Text('本周平均配速',style:TextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w700)),Spacer(),Text('5\'30" / km · ↓6"',style:TextStyle(color:_accent,fontSize:12,fontWeight:FontWeight.w800)),]),constSizedBox(height:14),SizedBox(height:100,child:Row(crossAxisAlignment:CrossAxisAlignment.end,mainAxisAlignment:MainAxisAlignment.spaceBetween,children:List.generate(7,(i){finalh=(1-paces[i]/maxVal+0.4)*80;finalmins=(paces[i]/60).floor();finalsecs=paces[i]%60;finaldays=['一','二','三','四','五','六','日'];returnColumn(children:[Text("$mins'${secs.toString().padLeft(2,'0')}\"",style:constTextStyle(color:_primary,fontSize:10,fontWeight:FontWeight.w700)),constSizedBox(height:4),Container(width:14,height:h,decoration:BoxDecoration(color:_primary,borderRadius:BorderRadius.circular(4))),constSizedBox(height:6),Text(days[i],style:constTextStyle(color:_sub,fontSize:11)),]);})),),]),);}

本周配速趋势用 7 根渐变柱子展示一周配速变化，柱子的高度由配速反映——配速越快柱子越高。橙色柱子配深色背景，是跑步类应用的标准趋势图。

从「本周配速趋势」的训练数据可视化与个人最佳追踪设计角度再补一段。跑步类应用的核心是「让用户看到自己越来越快」。这段趋势图把用户的本周配速与上周对比，如果某天配速创个人最佳，那根柱子用金色高亮 + 「PB!」chip 标注，给用户强烈的成就反馈。如果某天配速明显下滑，柱子用浅色显示而非红色——避免过度警示让用户产生挫败感。如果未来要扩展支持「按距离类型筛选」（5km、10km、半马、全马），可以在卡片顶部加 chip 切换栏。鸿蒙 6.0 端 Skia 对柱状图渲染极高效，每秒重绘也不会卡顿。

代码三：推荐训练计划

Widget_planItem(Map<String,dynamic>p){returnContainer(margin:constEdgeInsets.only(bottom:10),padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(14)),child:Row(children:[Container(width:50,height:50,decoration:BoxDecoration(color:(p['color']asColor).withValues(alpha:0.16),borderRadius:BorderRadius.circular(14)),child:Icon(p['icon']asIconData,color:p['color']asColor,size:26),),constSizedBox(width:12),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(p['name']asString,style:constTextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w700)),constSizedBox(height:4),Text(p['desc']asString,style:constTextStyle(color:_sub,fontSize:12)),],)),Container(padding:constEdgeInsets.symmetric(horizontal:10,vertical:5),decoration:BoxDecoration(color:_primary.withValues(alpha:0.14),borderRadius:BorderRadius.circular(20)),child:constText('开始',style:TextStyle(color:_primary,fontSize:11,fontWeight:FontWeight.w800)),),]),);}

AI 助手能力会根据用户的最大心率、过往配速等数据自动生成个性化训练计划——比起"全民同款"训练表更科学。

从「推荐训练计划」的 AI 个性化与计划执行设计角度再补一段。跑步类应用的「训练计划」是从「业余跑步」到「专业训练」的关键升级。这段卡片用「计划名 + 周期 + 难度 chip + 预计配速 + 加入计划按钮」五段信息塞在每张卡片里。每个计划用对应难度色识别（入门绿、进阶蓝、高阶紫、专业红），让用户一眼识别适合自己的难度。如果未来要扩展支持「跟随专业教练计划」（接入彭于晏、孙杨、苏炳添等明星跑者的训练表），可以在卡片上加教练头像和签名，骨架完全不动。鸿蒙 6.0 的 NeuralNetworkRuntime 让端侧 AI 推理生成个性化计划成为可能，整个流程不到 200ms。

心得

跑步教练类 App 的视觉灵魂是"动感 + 激励"——蓝青色给清晨晨跑感，配速 chip 给即时反馈。开发时最容易犯的错是把数据呈现得过于专业，让普通跑者看不懂。我的策略是用大字号目标 + 小 chip 关键指标的组合。从能力扩展角度，跑步教练最值得在鸿蒙端打造的是"LocationKit + SensorKit + AudioKit 配速播报 + 超级终端手表 + AI 训练计划"五件套。

总结

本篇实现了 Harmony 6.0 端的跑步配速教练首页，5 个模块、纯 UI、零依赖、约 320 行代码。从扩展角度建议生产业务里：把 GPS 接入 LocationKit；把传感器接入 SensorKit；把语音播报接入 AudioKit；把训练数据接入 HealthKit；把"今日训练"做成 FormExtensionAbility 桌面卡片。下一篇是第十三组的最后一块——老人跌倒检测应用。

查看全文

http://www.jsqmd.com/news/964452/