基于 Harmony 6.0 应用的夜市摊位地图与推荐应用首页实现前言夜市是中国城市最有烟火气的地方——长沙文和友、成都春熙路、台北士林夜市每个城市都有它的味觉记忆。一款好的夜市应用要把附近夜市 / 热门摊位 / 美食地图 / 排队提醒四件事在一屏内全部铺到。Harmony 6.0 时代夜市类应用迎来了几个独特的能力红利——LocationKit 让附近夜市精准、MapKit 提供摊位级地图、HMS Wallet 让小吃券电子化、PushKit 提供新摊位推送。本文用 Flutter 在 Harmony 6.0 上实现一个夜市地图首页。背景夜市类应用的视觉关键词是热闹、烟火、本土——红色 #DC2626 配橙色 #F97316 是这类应用的合适主色。本项目首页 5 个模块渐变 Header附近夜市 大地图按钮、4 大美食类型、热门摊位、排队等位、本月打卡。Flutter × Harmony 6.0 跨端开发介绍Harmony 6.0 在夜市类应用上的能力栈完整——LocationKit 让附近夜市精准定位、MapKit 提供摊位级地图、HMS Wallet 让小吃券电子化、PushKit 提供新摊位推送、AI 助手能力提供必吃推荐。开发核心代码代码一夜市 HeaderWidget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,_accent],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(24),),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Icon(Icons.nightlife,color:Colors.white,size:22),SizedBox(width:8),Text(夜市探店,style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Icon(Icons.map,color:Colors.white,size:22),]),constSizedBox(height:14),constText( 今晚开张,style:TextStyle(color:Colors.white70,fontSize:13)),constSizedBox(height:4),constText(望京小街夜市,style:TextStyle(color:Colors.white,fontSize:26,fontWeight:FontWeight.w900)),constSizedBox(height:6),constText(128 个摊位 · 距您 1.2 km,style:TextStyle(color:Colors.white70,fontSize:12)),constSizedBox(height:14),Container(width:double.infinity,height:50,decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(25)),child:constCenter(child:Row(mainAxisSize:MainAxisSize.min,children:[Icon(Icons.navigation,color:_primary,size:22),SizedBox(width:6),Text(开始探店,style:TextStyle(color:_primary,fontSize:16,fontWeight:FontWeight.w800)),],)),),]),);}夜市地图通过 MapKit 提供摊位级精度——每个小吃摊都能在地图上点击查看。从「夜市 Header」的烟火气与位置导览设计角度再补一段。夜市类应用的 Header 必须传递「热闹、好吃、就在附近」的氛围。这段 Header 用橙红到深紫的夜间渐变配合夜市名、营业时间、距离和「开始逛」按钮让用户产生出门冲动。如果未来要扩展支持「实时人流」可以在 Header 加拥挤度 chip。鸿蒙 6.0 的 MapKit 摊位级定位让用户能直接走到目标小吃摊。代码二4 大美食Widget_foods(){finalitemsconst[[,烧烤,_red],[,面食,_amber],[,甜品,_pink],[,饮品,_accent],];returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Row(children:items.map((it){finalcit[2]asColor;returnExpanded(child:Column(children:[Container(width:56,height:56,decoration:BoxDecoration(color:c.withValues(alpha:0.14),borderRadius:BorderRadius.circular(18)),alignment:Alignment.center,child:Text(it[0]asString,style:constTextStyle(fontSize:28)),),constSizedBox(height:6),Text(it[1]asString,style:constTextStyle(color:_ink,fontSize:12,fontWeight:FontWeight.w800)),]));}).toList()),);}4 大美食烧烤、甜品、主食、饮品覆盖夜市最常见的消费路径。每个入口用高饱和暖色营造食欲让用户按想吃的类型快速进入摊位列表。从「4 大美食」的夜市逛吃路径与决策效率设计角度再补一段。夜市用户通常不是精准搜索而是边走边看所以分类入口要足够感性想吃肉点烧烤想解腻点饮品想垫肚子点主食。如果未来要扩展支持「多人投票」朋友可以一起选择想吃的品类系统生成逛吃路线。鸿蒙 6.0 的 MapKit 能把摊位顺序按步行路径自动排列。代码三热门摊位Widget_stallItem(MapString,dynamics){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:(s[color]asColor).withValues(alpha:0.14),borderRadius:BorderRadius.circular(14)),alignment:Alignment.center,child:Text(s[emoji]asString,style:constTextStyle(fontSize:26)),),constSizedBox(width:12),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(s[name]asString,style:constTextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w700)),constSizedBox(height:4),Row(children:[constIcon(Icons.star,color:_amber,size:12),Text( ${s[score]},style:constTextStyle(color:_amber,fontSize:11,fontWeight:FontWeight.w700)),constSizedBox(width:8),Text(排队 ${s[queue]} 人,style:constTextStyle(color:_accent,fontSize:11,fontWeight:FontWeight.w700)),]),],)),Column(crossAxisAlignment:CrossAxisAlignment.end,children:[Text(¥${s[price]},style:constTextStyle(color:_primary,fontSize:14,fontWeight:FontWeight.w800)),constText(人均,style:TextStyle(color:_sub,fontSize:10)),]),]),);}热门排队人数实时同步给后端 前端显示——避免到现场发现排长队。从「热门摊位」的排队决策与烟火气呈现设计角度再补一段。热门摊位卡片必须展示摊位名、招牌菜、评分、排队人数、距离和营业状态让用户判断是否值得排队。排队人数是夜市体验的关键指标少则说明冷清多则可能等待太久。如果未来要扩展支持「到号提醒」用户可以先取虚拟号再去逛别处。鸿蒙 6.0 的 PushKit 能在快轮到时提醒减少原地等待。心得夜市类 App 的视觉灵魂是热闹 烟火——红橙色给夜市灯光感emoji 美食给亲切。开发时最容易犯的错是把摊位列表做得过于商业化反而失去烟火气。我的策略是用 emoji 简短的网红老字号标签。从能力扩展角度夜市类最值得在鸿蒙端打造的是LocationKit 米级定位 MapKit 摊位地图 HMS Wallet 小吃券 AI 助手必吃推荐四件套。总结本篇实现了 Harmony 6.0 端的夜市地图首页5 个模块、纯 UI、零依赖、约 320 行代码。从扩展角度建议生产业务里把定位接入 LocationKit把地图接入 MapKit把小吃券接入 HMS Wallet把今晚开张做成 FormExtensionAbility 桌面卡片把推荐接入 AI 助手。下一篇是第四十九组的第二块——手工艺品交易与定制平台。