基于 Harmony 6.0 应用的城市公共厕所导航应用首页实现前言公共厕所是城市最被忽视但最被需要的基础设施——逛街时找不到、紧急时来不及让内急成为一种隐形焦虑。一款好的公厕导航应用要把附近最近 / 干净评分 / 路线导航 / 收藏夹四件事在一屏内全部铺到。Harmony 6.0 时代公厕导航类应用迎来了几个独特的能力红利——LocationKit 米级定位、MapKit 提供步行路线、PushKit 提供附近 50m 有干净厕所提醒、超级终端让车机也能导航。本文用 Flutter 在 Harmony 6.0 上实现一个公厕导航首页。背景公厕导航类应用的视觉关键词是清新、即时、便民——青色 #06B6D4 配蓝色 #0EA5E9 是这类应用的合适主色。本项目首页 5 个模块渐变 Header最近公厕距离 大导航按钮、4 大类型筛选、附近公厕列表、本月使用统计、地铁公厕。Flutter × Harmony 6.0 跨端开发介绍Harmony 6.0 在公厕导航类应用上的能力栈完整——LocationKit 提供米级定位、MapKit 提供步行路线、超级终端让车机协同导航、PushKit 提供附近有干净厕所推送、AI 助手能力提供急用快速推荐。开发核心代码代码一附近 HeaderWidget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,Color(0xFF0E7490)],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(24),),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Icon(Icons.wc,color:Colors.white,size:22),SizedBox(width:8),Text(便民厕所,style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Icon(Icons.bookmark,color:Colors.white,size:22),]),constSizedBox(height:14),constText( 距您最近,style:TextStyle(color:Colors.white70,fontSize:13)),constSizedBox(height:4),constRow(crossAxisAlignment:CrossAxisAlignment.end,children:[Text(86,style:TextStyle(color:Colors.white,fontSize:50,fontWeight:FontWeight.w900)),SizedBox(width:6),Padding(padding:EdgeInsets.only(bottom:10),child:Text(m · 望京 SOHO 公厕,style:TextStyle(color:Colors.white,fontSize:14,fontWeight:FontWeight.w700))),]),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)),],)),),]),);}距离通过 LocationKit 实时计算 MapKit 给出步行路线——精确到米的指引让用户不会走错。从「附近 Header」的应急性与步行导航设计角度再补一段。公厕查询类应用的 Header 必须把「最近的可用公厕在哪里」一次性交付。这段 Header 用主蓝到青色渐变配合最近距离、预计步行时间和「一键导航」按钮让用户在紧急场景下不用思考。对于这类应用操作路径越短越好。如果未来要扩展支持「无障碍厕所优先」可以在 Header 加无障碍筛选 chip。鸿蒙 6.0 的 LocationKit MapKit 让位置指引足够精准。代码二4 大类型Widget_types(){finalitemsconst[[Icons.location_city,商场,_primary],[Icons.local_gas_station,加油站,_accent],[Icons.subway,地铁,_amber],[Icons.public,公园,_green],];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:48,height:48,decoration:BoxDecoration(color:c.withValues(alpha:0.14),borderRadius:BorderRadius.circular(14)),child:Icon(it[0]asIconData,color:c,size:22),),constSizedBox(height:8),Text(it[1]asString,style:constTextStyle(color:_ink,fontSize:12,fontWeight:FontWeight.w600)),]));}).toList()),);}4 大类型公共、商场、地铁、无障碍覆盖城市中最常见的公厕来源。每种类型代表不同可达性地铁稳定、商场干净、公共覆盖广、无障碍适合特殊人群。从「4 大类型」的城市公共服务与筛选效率设计角度再补一段。用户在紧急情况下不会逐个看详情所以类型筛选必须简单清楚。无障碍、母婴、24 小时开放等信息应成为一级筛选而不是隐藏在详情中。如果未来要扩展支持「清洁状态实时上报」可以让用户或保洁系统更新状态。鸿蒙 6.0 的 LocationKit 能按距离和步行时间排序帮助用户最快到达。代码三附近公厕Widget_toilet(MapString,dynamict){returnContainer(margin:constEdgeInsets.only(bottom:10),padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(14)),child:Row(children:[Container(width:44,height:44,decoration:BoxDecoration(color:_primary.withValues(alpha:0.14),borderRadius:BorderRadius.circular(12)),child:constIcon(Icons.wc,color:_primary,size:22),),constSizedBox(width:12),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(t[name]asString,style:constTextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w700)),constSizedBox(height:4),Row(children:[constIcon(Icons.location_on,color:_sub,size:12),Text(t[dist]asString,style:constTextStyle(color:_sub,fontSize:11)),constSizedBox(width:8),constIcon(Icons.star,color:Color(0xFFF59E0B),size:12),Text( ${t[score]},style:constTextStyle(color:Color(0xFFF59E0B),fontSize:11,fontWeight:FontWeight.w700)),]),],)),Container(padding:constEdgeInsets.symmetric(horizontal:6,vertical:2),decoration:BoxDecoration(color:t[clean]干净?_green.withValues(alpha:0.16):_amber.withValues(alpha:0.16),borderRadius:BorderRadius.circular(4)),child:Text(t[clean]asString,style:TextStyle(color:t[clean]干净?_green:_amber,fontSize:10,fontWeight:FontWeight.w800)),),]),);}干净评分通过用户社区评价聚合——避免找到的公厕到了发现没法用。从「附近公厕」的可信评价与步行决策设计角度再补一段。附近公厕列表必须展示距离、开放状态、干净评分、是否免费、是否有无障碍隔间等信息。距离最近不一定最好用所以干净评分和开放状态同样关键。如果未来要扩展支持「到达后反馈」用户可以一键评价干净程度和排队情况。鸿蒙 6.0 的 MapKit 可以根据实时步行路线计算到达时间而不仅是直线距离。心得公厕导航类 App 的视觉灵魂是清新 即时——青蓝色给清洁感大字号距离给紧迫。开发时最容易犯的错是评分不真实让用户失去信任。我的策略是依靠用户实地评价。从能力扩展角度公厕导航最值得在鸿蒙端打造的是LocationKit 米级定位 MapKit 步行路线 PushKit 推送 超级终端车机协同四件套。总结本篇实现了 Harmony 6.0 端的公厕导航首页5 个模块、纯 UI、零依赖、约 320 行代码。从扩展角度建议生产业务里把定位接入 LocationKit把路线接入 MapKit把车机协同接入超级终端把附近最近做成 FormExtensionAbility 桌面卡片把急用推送接入 PushKit。
