基于 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 助手能力提供"急用"快速推荐。

开发核心代码

代码一：附近 Header

Widget _header() {
  return Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      gradient: const LinearGradient(
        colors: [_primary, Color(0xFF0E7490)],
        begin: Alignment.topLeft, end: Alignment.bottomRight),
      borderRadius: BorderRadius.circular(24),
    ),
    child: Column(crossAxisAlignment: CrossAxisAlignment.start,
        children: [
      const Row(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),
      ]),
      const SizedBox(height: 14),
      const Text('🚻 距您最近',
          style: TextStyle(color: Colors.white70, fontSize: 13)),
      const SizedBox(height: 4),
      const Row(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))),
      ]),
      const SizedBox(height: 14),
      Container(width: double.infinity, height: 50,
        decoration: BoxDecoration(color: Colors.white,
            borderRadius: BorderRadius.circular(25)),
        child: const Center(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() {
  final items = const [
    [Icons.location_city, '商场', _primary],
    [Icons.local_gas_station, '加油站', _accent],
    [Icons.subway, '地铁', _amber],
    [Icons.public, '公园', _green],
  ];
  return Container(padding: const EdgeInsets.all(14),
    decoration: BoxDecoration(color: _card,
        borderRadius: BorderRadius.circular(16)),
    child: Row(children: items.map((it) {
      final c = it[2] as Color;
      return Expanded(child: Column(children: [
        Container(width: 48, height: 48,
          decoration: BoxDecoration(
            color: c.withValues(alpha: 0.14),
            borderRadius: BorderRadius.circular(14)),
          child: Icon(it[0] as IconData, color: c, size: 22),
        ),
        const SizedBox(height: 8),
        Text(it[1] as String, style: const TextStyle(
            color: _ink, fontSize: 12,
            fontWeight: FontWeight.w600)),
      ]));
    }).toList()),
  );
}

4 大类型（公共、商场、地铁、无障碍）覆盖城市中最常见的公厕来源。每种类型代表不同可达性：地铁稳定、商场干净、公共覆盖广、无障碍适合特殊人群。

从「4 大类型」的城市公共服务与筛选效率设计角度再补一段。用户在紧急情况下不会逐个看详情，所以类型筛选必须简单清楚。无障碍、母婴、24 小时开放等信息应成为一级筛选，而不是隐藏在详情中。如果未来要扩展支持「清洁状态实时上报」，可以让用户或保洁系统更新状态。鸿蒙 6.0 的 LocationKit 能按距离和步行时间排序，帮助用户最快到达。

代码三：附近公厕

Widget _toilet(Map<String, dynamic> t) {
  return Container(
    margin: const EdgeInsets.only(bottom: 10),
    padding: const EdgeInsets.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: const Icon(Icons.wc,
            color: _primary, size: 22),
      ),
      const SizedBox(width: 12),
      Expanded(child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(t['name'] as String,
              style: const TextStyle(color: _ink,
                  fontSize: 14, fontWeight: FontWeight.w700)),
          const SizedBox(height: 4),
          Row(children: [
            const Icon(Icons.location_on, color: _sub, size: 12),
            Text(t['dist'] as String,
                style: const TextStyle(
                    color: _sub, fontSize: 11)),
            const SizedBox(width: 8),
            const Icon(Icons.star,
                color: Color(0xFFF59E0B), size: 12),
            Text(' ${t['score']}',
                style: const TextStyle(
                    color: Color(0xFFF59E0B), fontSize: 11,
                    fontWeight: FontWeight.w700)),
          ]),
        ],
      )),
      Container(padding: const EdgeInsets.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'] as String,
            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。