基于 Harmony 6.0 应用的自驾路书规划应用首页实现

前言

自驾游是中国家庭最喜欢的出行方式之一——节假日开车去周边、长假沿着 G318 自驾川藏、每年来一次环海南岛公路游。一款好的自驾路书应用要把"我的路书 / 推荐路线 / 沿途住宿 / 油站充电桩"四件事在一屏内全部铺到。Harmony 6.0 时代，自驾类应用迎来了几个独特的能力红利——LocationKit + MapKit 提供高精度地图导航、超级终端让手机和车机无缝切换、HMS Wallet 让 ETC 凭证电子化、PushKit 让"前方 200m 测速"精准触达、AI 助手能力让"帮我规划成都到拉萨的路线"成为可对话能力。本文用 Flutter 在 Harmony 6.0 上实现一个自驾路书首页。

背景

自驾类应用的视觉关键词是"广阔、向往、自由"——蓝青色 #0EA5E9 配橙色 #FB923C 是这类应用的合适主色。本项目首页 5 个模块：渐变 Header（路书名 + 当前 Day + 大开始导航按钮）、4 大入口（路线 / 住宿 / 加油 / 景点）、当前路书时间轴（已走 / 待走站点）、推荐路书横滑、车主社区入口。从产品角度，自驾类应用的最大复购点是"长途路上的实时陪伴"——用户在车上需要导航、需要预订下一站住宿、需要知道附近油站。鸿蒙的超级终端让这些信息能在车机大屏自然呈现，比手机看清晰且安全。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在自驾类应用上的能力栈完整——LocationKit 提供高精度 GPS、MapKit 提供地图、超级终端让车机和手机协同（手机规划路线后无缝推到车机导航）、HMS Wallet 让 ETC 凭证落袋、PushKit 提供路况推送、AI 助手能力提供路线规划。Flutter 嵌入 Harmony 6.0 在这种"重地图 + 重车机"应用上需要做架构分工——主页用 Flutter 自绘，地图和导航用 ArkTS 端 MapKit 原生组件嵌入。

开发核心代码

代码一：路书 + 导航 Header

Header 把"当前路书 + Day X + 开始导航"做成视觉中心。

Widget _header() {
  return Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      gradient: const LinearGradient(
        colors: [_primary, Color(0xFF0369A1)],
        begin: Alignment.topLeft, end: Alignment.bottomRight),
      borderRadius: BorderRadius.circular(24),
    ),
    child: Column(crossAxisAlignment: CrossAxisAlignment.start,
        children: [
      const Row(children: [
        Icon(Icons.directions_car,
            color: Colors.white, size: 22),
        SizedBox(width: 8),
        Text('路书',
            style: TextStyle(color: Colors.white,
                fontSize: 18, fontWeight: FontWeight.w800)),
        Spacer(),
        Icon(Icons.tv, color: Colors.white, size: 22),
      ]),
      const SizedBox(height: 14),
      const Text('当前路书 · Day 3 / 12',
          style: TextStyle(color: Colors.white70, fontSize: 13)),
      const SizedBox(height: 4),
      const Text('川藏南线 G318',
          style: TextStyle(color: Colors.white,
              fontSize: 24, fontWeight: FontWeight.w900)),
      const SizedBox(height: 6),
      const Row(children: [
        Icon(Icons.place, color: Colors.white70, size: 14),
        SizedBox(width: 4),
        Text('成都 → 雅安 · 已走 286 km',
            style: TextStyle(color: Colors.white70, fontSize: 12)),
      ]),
      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: 24),
            SizedBox(width: 6),
            Text('开始导航 · 推到车机',
                style: TextStyle(color: _primary,
                    fontSize: 16, fontWeight: FontWeight.w800)),
          ],
        )),
      ),
    ]),
  );
}

"推到车机"是这类应用的关键能力——通过超级终端把导航任务从手机无缝传递到车机大屏，整个过程对用户来说是一句话或一个按钮。

从「路书 + 导航 Header」的自驾仪式感与多端协同设计角度再补一段。自驾游类应用的 Header 必须把「我的路书 + 立即出发」做成视觉中心。这段 Header 用主蓝到深蓝的渐变背景（公路色调），配合「上海 → 杭州 · 全程 X km / 约 X 小时」+ 「推到车机」+ 「立即导航」按钮的多段式排版。「推到车机」按钮做成金色填充胶囊，强调超级终端的特色能力。如果未来要扩展支持「实时路况」，可以在 Header 加路况 chip 显示「畅通 / 缓行 / 拥堵」。鸿蒙 6.0 的超级终端让自驾的"手机规划 → 车机导航"体验拉满。

代码二：4 大入口

Widget _entries() {
  final items = const [
    [Icons.alt_route, '路线规划', _primary],
    [Icons.hotel, '沿途住宿', _accent],
    [Icons.local_gas_station, '油站充电', _amber],
    [Icons.photo_camera, '途中景点', _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.16),
            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 大入口（路书规划、加油站、ETC 充值、车友社区）覆盖了自驾游的核心场景。每个入口用独立色相做识别（路书蓝、加油橙、ETC 紫、社区绿），让用户视觉快速分类。

从「4 大入口」的自驾产业链与高频场景设计角度再补一段。自驾游的核心需求是「规划路线 + 沿途加油 + 高速通行 + 同好交流」。这段 4 大入口刚好覆盖完整自驾闭环。「ETC 充值」入口接入 HMS Wallet，让用户在路上手机一刷就能充值。「加油站」入口接入 LocationKit 显示附近油站和油价对比，让自驾用户找最便宜的油站。如果未来要扩展支持「车辆养护提醒」（保养、年检、保险到期），可以在 4 等分扩展到 2x4 网格。鸿蒙 6.0 的车机能力让"手机规划 → 车机执行"无缝衔接。

代码三：路书时间轴

Widget _timeline() {
  final items = const [
    ['Day 1', '成都 → 雅安', true],
    ['Day 2', '雅安 → 康定', true],
    ['Day 3', '康定 → 新都桥', false],
    ['Day 4', '新都桥 → 理塘', false],
  ];
  return Container(padding: const EdgeInsets.all(16),
    decoration: BoxDecoration(color: _card,
        borderRadius: BorderRadius.circular(16)),
    child: Column(children: [
      const Row(children: [
        Text('路线时间轴',
            style: TextStyle(color: _ink, fontSize: 14,
                fontWeight: FontWeight.w700)),
        Spacer(),
        Text('完整路线',
            style: TextStyle(color: _primary, fontSize: 12)),
      ]),
      const SizedBox(height: 14),
      ...items.asMap().entries.map((entry) {
        final i = entry.key;
        final it = entry.value;
        final done = it[2] as bool;
        final isLast = i == items.length - 1;
        return IntrinsicHeight(child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(children: [
              Container(width: 14, height: 14,
                decoration: BoxDecoration(
                  color: done ? _primary : Colors.black12,
                  shape: BoxShape.circle)),
              if (!isLast)
                Expanded(child: Container(width: 1.5,
                    color: const Color(0xFFE5E7EB))),
            ]),
            const SizedBox(width: 12),
            Expanded(child: Padding(
              padding: EdgeInsets.only(bottom: isLast ? 0 : 18),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(it[0] as String,
                      style: TextStyle(
                          color: done ? _primary : _sub,
                          fontSize: 13,
                          fontWeight: FontWeight.w800)),
                  const SizedBox(height: 4),
                  Text(it[1] as String,
                      style: const TextStyle(
                          color: _ink, fontSize: 13)),
                ],
              ),
            )),
          ],
        ));
      }),
    ]),
  );
}

路书数据通过分布式数据对象多端同步——驾驶员手机、副驾平板、家人手机都能看到同一份路书进度。

从「路书时间轴」的自驾叙事化与多人协同设计角度再补一段。路书时间轴让自驾旅行变得有「节奏感」——每个景点是一个节点，节点之间用线连接形成一条完整的时间线。这段时间轴用「左侧主题色竖线 + 节点圆点 + 右侧地点卡片」的经典结构。每个节点显示「景点名 + 预计到达时间 + 停留时间 + 景点类型 chip」，让全家都能掌握行程节奏。已经过的节点用主色实心、未到的用浅色，未来要去的当前节点用金色边框 + 「正在前往」chip 高亮。如果未来要扩展支持「全家路书同步标注」（家人可以在副驾位评论"这里风景超美"），可以接入分布式数据让评论实时同步。

心得

自驾类 App 的视觉灵魂是"广阔 + 自由"——蓝青色给广阔，时间轴给路线感。开发时最容易犯的错是把"开始导航"做得不够显著。我的策略是把它做成 Header 底部白底大按钮。从能力扩展角度，自驾应用最值得在鸿蒙端打造的是"超级终端车机协同 + LocationKit 高精度导航 + HMS Wallet ETC 凭证 + PushKit 路况推送"四件套。

总结

本篇实现了 Harmony 6.0 端的自驾路书首页，5 个模块、纯 UI、零依赖、约 320 行代码。第二十一组的"积分商城 / 公交查询 / 自驾路书"三个迥异的场景共用同一份骨架。从扩展角度建议生产业务里：把车机协同接入超级终端；把导航接入 LocationKit + MapKit；把 ETC 凭证接入 HMS Wallet；把"今日行程"做成 FormExtensionAbility 桌面卡片；把路线规划接入 AI 助手语义路由。