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

基于 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 助手提供训练建议、超级终端让手表协同。开发核心代码代码一今日目标 HeaderWidget_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:530\),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(){finalpacesconst[340,332,328,335,325,322,330];finalmaxValpaces.reduce((a,b)ab?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]/maxVal0.4)*80;finalmins(paces[i]/60).floor();finalsecspaces[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(MapString,dynamicp){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 桌面卡片。下一篇是第十三组的最后一块——老人跌倒检测应用。