基于HarmonyOS 7.0 跨端开发的公交实时到站页面实战

前言

在城市出行与公共交通类应用中，公交实时到站是一个解决"等车焦虑"的高频刚需主题功能。等公交最煎熬的就是不知道车什么时候来——是马上到还是要等很久，而一个能实时显示公交车位置、预测到站时间、提示拥挤度的应用，让等车从盲目焦虑变成心中有数。一个优秀的公交实时页面，需要支持线路站点搜索、用实时到站列表展示车辆动态（方向、距离站数、预计到达、拥挤度）、并收藏常用线路。这类页面在技术上的特点是"实时数据展示加到站状态高亮"——它需要展示动态的到站信息，并对"即将到站"的车辆特别高亮提醒。当我们把这样一个实时交通主题的页面放进 HarmonyOS 7.0 的跨端开发语境时，它就成为检验 Flutter 实时数据展示与状态高亮跨端一致性的合适样本。本文将以一个真实的 Flutter 公交实时页面为载体，结合 Flutter 与 HarmonyOS 7.0 的融合架构，深入剖析它的设计思路、核心代码与跨端落地路径。需要在开篇明确：本文涉及的鸿蒙适配全部基于 HarmonyOS 跨平台 SIG 维护的定制版 Flutter SDK，而非 flutter.dev 官方版本，这是所有讨论的前提。

背景

公交实时到站的价值在于"消除等待的不确定性"。传统等公交全凭运气，不知道车的位置和到站时间，而实时到站通过公交车的 GPS 定位和调度系统数据，能告诉乘客每辆车现在距离本站还有几站、预计几分钟到达，甚至车厢的拥挤程度（舒适/适中/拥挤）。这些信息让乘客能合理安排——还有12分钟可以先去买杯咖啡、即将到站赶紧往站台走。其中"即将到站"是最关键的状态，需要特别醒目地提醒乘客准备上车。收藏常用线路则方便日常通勤者快速查看每天乘坐的线路。从技术上看，这个页面的展示层是纯 Flutter，而实时数据来自公交调度系统的服务端 API，"附近站点"依赖定位。在传统多端开发中，要在 Android、iOS、HarmonyOS 上分别实现这套实时界面，逻辑各写一套。这种"实时数据清晰、到站状态醒目"的要求，正是 Flutter 跨端价值的体现。我们的目标，是用一份 Dart 代码让手机、平板与鸿蒙设备上呈现一致的公交实时体验。

Flutter × Harmony7.0 跨端开发介绍

公交实时页面要在 HarmonyOS 7.0 上正确运行，需要理解 Flutter 在鸿蒙上的运行架构。Flutter 由 Framework、Engine、Embedder 三层组成。Framework 层用 Dart 编写，负责组件、状态、布局、手势等，本页面里的搜索栏、实时到站列表、收藏线路都属于这一层。Engine 层是运行时核心，负责 Dart VM、AOT 产物加载、GPU 渲染、文本排版等；Flutter 在鸿蒙上的界面由其自绘引擎绘制，通过接入 HarmonyOS 的 ArkUI RenderingContext 获取 GPU 渲染上下文，再由 ArkTS 容器 FlutterAbility 承载输出，这保证了公交绿的出行配色、到站列表的即将到站高亮、收藏线路的线路号徽章在鸿蒙上的像素级还原。Embedder 层是 Flutter 与鸿蒙系统的桥梁，由 @ohos/flutter_ohos 提供的 FlutterAbility 实现。在能力接入上，搜索、到站列表、收藏线路的展示都是纯 Framework 能力，可零适配复用；实时到站数据来自公交系统服务端，通过 dio 等纯 Dart 网络库轮询或 WebSocket 获取（纯 Dart 跨端），"附近站点"依赖定位（需 Location Kit 适配），"到站提醒"则需本地通知能力（需适配）。编译上，Release 模式的 AOT 提前编译保证了列表渲染的原生级效率。

开发核心代码

公交实时页面的代码可分为三个核心部分。第一部分是搜索栏。页面以 StatefulWidget 承载，入口类被统一命名为 ProfilePage，状态类 _BusRealtimePageState 用 const 列表声明到站和收藏数据。

class ProfilePage extends StatefulWidget {
  const ProfilePage({super.key});
  @override
  State<ProfilePage> createState() => _BusRealtimePageState();
}

// 搜索栏
Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(23),  // 胶囊圆角
    border: Border.all(color: const Color(0xFFDCFCE7)),
  ),
  child: const Row(children: [
    Icon(Icons.search, color: Color(0xFF9CA3AF), size: 20),
    Text('搜索公交线路或站点...', style: TextStyle(color: Color(0xFFD1D5DB))),
  ]),
)

这段代码用胶囊形的搜索栏作为线路站点查询入口，圆角 23（等于高度一半）形成胶囊形状，搜索图标加占位文字提示功能。这是应用顶部搜索栏的标准设计。在真实产品中点击会进入搜索页输入线路或站点。这种搜索栏纯 Flutter 实现，跨端一致。

第二部分是实时到站列表，它对"即将到站"的车辆特别高亮。

..._arrivals.map((a) {
  final arriving = a['stops'] == '即将到站';  // 判断是否即将到站
  return Container(
    decoration: BoxDecoration(
      color: arriving ? const Color(0xFFF0FDF4) : const Color(0xFFF9FAFB),  // 即将到站绿底
      border: Border(left: BorderSide(
          color: arriving ? _busPrimary : const Color(0xFFE5E7EB), width: 3)),  // 即将到站绿条
    ),
    child: Row(children: [
      Container(child: Text(a['icon'] as String)),  // 公交图标
      Expanded(child: Column(children: [
        Row(children: [
          Container(  // 线路号徽章
            decoration: BoxDecoration(color: _busPrimary),
            child: Text(a['line'] as String, style: const TextStyle(color: Colors.white)),
          ),
          Text(a['direction'] as String),  // 方向
        ]),
        Text('${a['stops']} · ⏱${a['eta']} · 👥${a['crowd']}'),  // 站数+时间+拥挤度
      ])),
      Text(a['eta'] as String,  // ETA（即将到站红色，否则绿色）
          style: TextStyle(
              color: arriving ? const Color(0xFFDC2626) : _busPrimary,
              fontWeight: FontWeight.w900)),
    ]),
  );
})

这段代码的核心是"即将到站"状态的高亮处理。arriving 判断车辆是否即将到站，若是则整行用绿底加绿色左条突出，右侧的 ETA 时间还用红色（紧迫感）而非常规的绿色。这种对关键状态（即将到站）的多重视觉强化（背景、边条、文字色），确保乘客不会错过马上要来的车。每条到站信息展示线路号徽章、方向、距离站数、预计到达时间和拥挤度（👥拥挤度让乘客预判是否挤得上）。这种实时到站列表是公交应用的核心，状态高亮逻辑纯 Dart 实现、配色由自绘渲染，跨端一致。在真实产品中，这些数据由服务端实时推送并定时刷新。

第三部分是收藏线路，它展示常用线路的运营信息。

..._favorites.map((f) => Container(
  decoration: BoxDecoration(color: const Color(0xFFF0FDF4)),
  child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
    Row(children: [
      Container(  // 线路号徽章
        decoration: BoxDecoration(color: _busPrimary),
        child: Text(f['line'] as String, style: const TextStyle(color: Colors.white)),
      ),
      Expanded(child: Text('${f['from']} ↔ ${f['to']}')),  // 起末站（双向）
      const Text('⭐'),  // 收藏标记
    ]),
    Text('⏱${f['first']}-${f['last']} · 间隔${f['interval']}'),  // 首末班 + 发车间隔
  ]),
))

这段代码用收藏列表展示常用线路，每条有线路号徽章、起末站（用 ↔ 表示双向）、收藏星标、首末班时间和发车间隔。发车间隔（“5-8分钟”）是个实用信息——告诉乘客大概多久来一趟车，帮助判断等待时间。收藏功能让通勤者快速查看每天乘坐的线路。这种收藏列表是成熟的展示模式，纯 Dart 实现跨端一致。三部分代码合在一起，构成了一个搜索便捷、到站醒目、线路可收藏的公交实时页面，其搜索栏、到站列表、收藏线路的 UI 都不依赖任何平台特性可零适配跨端，而实时数据用纯 Dart 网络库复用，定位与提醒需适配。

心得

把这个公交实时页面落地到 HarmonyOS 7.0，让我对 Flutter 在"实时数据类应用"上的跨端表现有了体会，尤其是关键状态高亮和实时数据获取两方面。第一点深的体会是关键状态的多重视觉强化。"即将到站"是公交应用最关键的状态，这个页面用了三重强化——绿色背景、绿色左边条、红色 ETA 文字，确保乘客绝不会错过马上要来的车。这种对关键状态的多重视觉强化是个值得学习的设计思路：越重要的状态，越要用多个视觉维度（颜色、背景、位置、动画）强化。而这些视觉强化都由纯 Dart 的条件逻辑和自绘渲染实现，跨端一致——鸿蒙上的"即将到站"和手机端一样醒目。第二点体会是实时数据获取的跨端方案。公交实时数据需要持续更新，技术上可以用轮询（定时 dio 请求）或 WebSocket（服务端推送），这两种都是纯 Dart 能力（dio、web_socket_channel 等纯 Dart 库），跨端一致，无需平台适配。这让我认识到，实时数据获取这个看似"高级"的功能，在 Flutter 里其实是纯 Dart 的网络能力，跨端零成本。第三点体会是这类 LBS 出行应用的能力构成——展示和实时数据零成本跨端，但"附近站点"依赖定位（需 Location Kit 适配）、"到站提醒"需本地通知（需适配），这是出行类应用的共性适配点。第四点体会是公交出行主题的呈现——公交绿配色营造绿色出行的氛围，由自绘渲染跨端一致。第五点是工程规律的印证：搜索、到站列表、收藏零成本跨端，关键状态多重高亮跨端一致，实时数据用纯 Dart 网络库（轮询/WebSocket）复用，仅定位和提醒需适配。

总结

通过公交实时到站页面在 HarmonyOS 7.0 上的实践，我们看到了 Flutter 跨端方案在"实时数据类应用"上的可靠表现。架构上，Framework、Engine、Embedder 三层在鸿蒙平台协同运转，自绘渲染保证了公交绿配色、即将到站的多重高亮、线路号徽章的视觉一致，AOT 编译保证了渲染的高效，实时数据用纯 Dart 网络库（轮询或 WebSocket）跨端获取，而定位与到站提醒则通过 Embedder 层接入鸿蒙能力。代码上，页面通过胶囊搜索栏、即将到站高亮的实时列表、以及收藏线路，把公交实时查询干净地映射成了清晰醒目的界面，UI 的 Dart 代码无需修改即可在鸿蒙运行，实时数据用纯 Dart 网络库复用，充分体现了 Flutter 跨端的能力。

这次实践展现了两个有价值的点：其一，关键状态（如即将到站）的多重视觉强化（背景、边条、文字色）能确保用户不错过重要信息，而这些强化由纯 Dart 逻辑加自绘渲染跨端一致；其二，实时数据获取（轮询/WebSocket）是纯 Dart 的网络能力，跨端零成本，无需平台适配。公交实时的搜索、到站、收藏零成本跨端，实时数据用纯 Dart 网络库复用，仅附近站点（定位）和到站提醒（本地通知）需适配。这提示我们，实时数据类应用的展示与数据获取可放心跨端复用，仅定位和提醒需适配。因此，对准备进入鸿蒙生态的 Flutter 团队，对这类应用可以放心地把展示与实时数据获取当作低成本跨端的部分快速落地，用多重视觉强化突出关键状态，把定位与提醒做针对性适配，并始终以 HarmonyOS 跨平台 SIG 维护的定制版 Flutter SDK 作为一切工作的起点。唯有如此，才能既享受一次开发、多端部署的红利，又稳妥驾驭定位与提醒的适配，让公交实时到站这样消除等待焦虑的功能真正清晰、醒目地服务于每一位公交出行者。