HarmonyOS ArkTS 实战：实现一个校园校车时刻与预约应用

项目效果

本文使用 HarmonyOS 和 ArkTS 实现一个校园校车时刻与预约应用。

应用可以查看校车线路和时刻表，预约座位，查看校车实时位置，设置到站提醒，并提供收藏线路、乘坐统计等功能。

项目使用 DevEco Studio 开发，适配 API 23 及以上版本。

运行效果

功能介绍

• 校车线路查询
• 时刻表查看
• 座位预约
• 实时位置
• 到站提醒
• 收藏线路
• 乘坐记录
• 余座显示
• 站点列表
• 乘坐统计

定义数据结构

interface BusStop {
  name: string;
  arriveTime: string;
}

interface BusRoute {
  id: number;
  name: string;
  direction: string;
  startTime: string;
  endTime: string;
  interval: number;
  price: number;
  totalSeats: number;
  reservedSeats: number;
  stops: BusStop[];
  isCollected: boolean;
}

interface Reservation {
  id: number;
  routeId: number;
  routeName: string;
  date: string;
  time: string;
  startStop: string;
  endStop: string;
  seatNumber: string;
  status: string;
}

初始化页面状态

@State private selectedDate: string = '2026-07-19';
@State private nextReserveId: number = 5;

初始数据包含3条校车线路和预约记录。

预约座位

private reserveSeat(routeId: number, time: string, start: string, end: string): void {
  const seat = String(Math.floor(Math.random() * 40) + 1) + '座';
  const res: Reservation = {
    id: this.nextReserveId, routeId, routeName: '', date: this.selectedDate,
    time, startStop: start, endStop: end, seatNumber: seat, status: '已预约'
  };
  this.reservations = [res, ...this.reservations];
  this.nextReserveId++;
}

取消预约

private cancelReservation(resId: number): void {
  this.reservations = this.reservations.map(r => 
    r.id === resId ? { ...r, status: '已取消' } : r
  );
}

主题色：水鸭色#14B8A6，体现交通、出行、便捷的感觉。

统计数据

• 已预约次数
• 收藏线路数
• 本月乘坐次数
• 累计节省时间

页面设计说明

顶部统计卡片，线路列表，时刻表，预约弹窗，我的预约。线路使用卡片展示，余座用进度条显示。

SDK 配置

API 24。

运行项目

entry/src/main/ets/pages/Index.ets

项目总结

实现了校车时刻查询、座位预约、收藏、乘坐记录等功能。掌握了列表展示、预约流程、收藏功能、状态管理等。后续可加入实时定位、扫码乘车、校车拥挤度显示、拼车功能等。