HarmonyOS ArkTS 实战实现一个校园拼车与顺风车应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园拼车与顺风车应用。应用可以发布拼车信息报名拼车查看行程详情联系车主并提供目的地筛选、行程状态管理和拼车统计等功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。运行效果功能介绍本项目实现了以下功能发布拼车行程设置出发地目的地设置出发时间设置人数和费用报名拼车取消报名联系车主/乘客完成行程按目的地筛选按状态筛选我的行程统计发布、参与、完成的行程费用AA计算定义数据结构首先定义拼车订单的数据结构interfacePassenger{id:number;studentId:string;name:string;phone:string;joinTime:string;}interfaceCarpoolOrder{id:number;startPoint:string;endPoint:string;departTime:string;totalSeats:number;pricePerPerson:number;carType:string;driverName:string;driverPhone:string;note:string;status:string;passengers:Passenger[];publishTime:string;}字段说明如下Passenger乘客id乘客编号studentId学号name姓名phone联系方式joinTime报名时间CarpoolOrder拼车订单id订单编号startPoint出发地endPoint目的地departTime出发时间totalSeats总座位数pricePerPerson人均费用carType车型顺风车/出租车/网约车driverName车主姓名driverPhone车主电话note备注status状态招募中/已成行/已完成/已取消passengers乘客列表publishTime发布时间初始化页面状态使用State保存输入内容、筛选条件StateprivatestartText:string;StateprivateendText:string;StateprivatetimeText:string;StateprivateseatsText:string;StateprivatepriceText:string;StateprivatedriverNameText:string;StateprivatedriverPhoneText:string;StateprivatenoteText:string;StateprivatepassengerNameText:string;StateprivatepassengerPhoneText:string;StateprivateselectedCarType:string顺风车;StateprivatefilterEndPoint:string全部;StateprivatecurrentUserId:string2023001;StateprivatenextOrderId:number5;StateprivatenextPassengerId:number20;准备一些初始拼车数据Stateprivateorders:CarpoolOrder[][{id:1,startPoint:学校东门,endPoint:虹桥火车站,departTime:2026-07-20 08:00,totalSeats:3,pricePerPerson:30,carType:顺风车,driverName:王同学,driverPhone:138****1234,note:可放两个行李箱准时出发,status:招募中,publishTime:2026-07-15,passengers:[]},{id:2,startPoint:学校南门,endPoint:浦东机场,departTime:2026-07-22 06:00,totalSeats:2,pricePerPerson:50,carType:网约车,driverName:李同学,driverPhone:139****5678,note:赶早班机不等人,status:已成行,publishTime:2026-07-14,passengers:[{id:1,studentId:2023001,name:张同学,phone:136****9012,joinTime:2026-07-15}]},{id:3,startPoint:学校北门,endPoint:人民广场,departTime:2026-07-10 14:00,totalSeats:3,pricePerPerson:20,carType:出租车,driverName:赵同学,driverPhone:137****3456,note:周末出去玩差两个人,status:已完成,publishTime:2026-07-08,passengers:[{id:2,studentId:2022005,name:孙同学,phone:135****7890,joinTime:2026-07-09}]}];发布拼车用户可以发布拼车行程privatepublishOrder():void{conststartthis.startText.trim();constendthis.endText.trim();consttimethis.timeText.trim();constseatsparseInt(this.seatsText);constpriceparseInt(this.priceText);constdriverthis.driverNameText.trim();constphonethis.driverPhoneText.trim();if(start.length0||end.length0||time.length0||isNaN(seats)||isNaN(price)||driver.length0){return;}constorder:CarpoolOrder{id:this.nextOrderId,startPoint:start,endPoint:end,departTime:time,totalSeats:seats,pricePerPerson:price,carType:this.selectedCarType,driverName:driver,driverPhone:phone,note:this.noteText.trim(),status:招募中,publishTime:newDate().toISOString().split(T)[0],passengers:[]};this.orders[order,...this.orders];this.nextOrderId1;this.startText;this.endText;this.timeText;this.seatsText;this.priceText;this.driverNameText;this.driverPhoneText;this.noteText;}报名拼车乘客可以报名拼车privatejoinCarpool(orderId:number):void{constnamethis.passengerNameText.trim();constphonethis.passengerPhoneText.trim();if(name.length0||phone.length0){return;}this.ordersthis.orders.map((order:CarpoolOrder){if(order.idorderIdorder.status招募中order.passengers.lengthorder.totalSeats){constalreadyJoinedorder.passengers.some(pp.studentIdthis.currentUserId);if(alreadyJoined)returnorder;constnewPassenger:Passenger{id:this.nextPassengerId,studentId:this.currentUserId,name,phone,joinTime:newDate().toISOString().split(T)[0]};this.nextPassengerId1;constnewPassengers[...order.passengers,newPassenger];constnewStatusnewPassengers.lengthorder.totalSeats?已成行:招募中;return{id:order.id,startPoint:order.startPoint,endPoint:order.endPoint,departTime:order.departTime,totalSeats:order.totalSeats,pricePerPerson:order.pricePerPerson,carType:order.carType,driverName:order.driverName,driverPhone:order.driverPhone,note:order.note,status:newStatus,publishTime:order.publishTime,passengers:newPassengers};}returnorder;});this.passengerNameText;this.passengerPhoneText;}取消报名和完成行程privatecancelJoin(orderId:number,passengerId:number):void{this.ordersthis.orders.map((order:CarpoolOrder){if(order.idorderIdorder.status招募中){return{id:order.id,startPoint:order.startPoint,endPoint:order.endPoint,departTime:order.departTime,totalSeats:order.totalSeats,pricePerPerson:order.pricePerPerson,carType:order.carType,driverName:order.driverName,driverPhone:order.driverPhone,note:order.note,status:招募中,publishTime:order.publishTime,passengers:order.passengers.filter(pp.id!passengerId)};}returnorder;});}privatecompleteOrder(orderId:number):void{this.ordersthis.orders.map((order:CarpoolOrder){if(order.idorderIdorder.status已成行){return{id:order.id,startPoint:order.startPoint,endPoint:order.endPoint,departTime:order.departTime,totalSeats:order.totalSeats,pricePerPerson:order.pricePerPerson,carType:order.carType,driverName:order.driverName,driverPhone:order.driverPhone,note:order.note,status:已完成,publishTime:order.publishTime,passengers:order.passengers};}returnorder;});}取消行程车主可以取消未成团的行程privatecancelOrder(orderId:number):void{this.ordersthis.orders.map((order:CarpoolOrder){if(order.idorderIdorder.status招募中){return{id:order.id,startPoint:order.startPoint,endPoint:order.endPoint,departTime:order.departTime,totalSeats:order.totalSeats,pricePerPerson:order.pricePerPerson,carType:order.carType,driverName:order.driverName,driverPhone:order.driverPhone,note:order.note,status:已取消,publishTime:order.publishTime,passengers:order.passengers};}returnorder;});}筛选订单privategetFilteredOrders():CarpoolOrder[]{if(this.filterEndPoint全部){returnthis.orders;}if(this.filterEndPoint我参与的){returnthis.orders.filter(oo.passengers.some(pp.studentIdthis.currentUserId)||o.driverName我);}returnthis.orders.filter(oo.endPoint.includes(this.filterEndPoint));}车型选择按钮封装BuilderCarTypeButton(text:string){Button(text).height(32).padding({left:14,right:14}).fontSize(12).fontColor(this.selectedCarTypetext?Color.White:#344054).backgroundColor(this.selectedCarTypetext?#84CC16:#ECFCCB).borderRadius(16).onClick((){this.selectedCarTypetext;});}统计数据privategetRecruitingCount():number{returnthis.orders.filter(oo.status招募中).length;}privategetJoinedCount():number{returnthis.orders.filter(oo.passengers.some(pp.studentIdthis.currentUserId)).length;}privategetCompletedCount():number{returnthis.orders.filter(oo.status已完成).length;}privategetTotalSaved():number{lettotal0;this.orders.forEach(o{if(o.status已完成){totalo.pricePerPerson*o.passengers.length;}});returntotal;}顶部统计区域展示招募中、我参与的、已完成、总费用this.StatCard(招募中,${this.getRecruitingCount()},#84CC16,#F7FEE7);this.StatCard(我参与,${this.getJoinedCount()},#2563EB,#EFF6FF);this.StatCard(已完成,${this.getCompletedCount()},#059669,#ECFDF5);this.StatCard(总费用,¥${this.getTotalSaved()},#D97706,#FFF7E8);设置状态颜色privategetStatusColor(status:string):ResourceColor{if(status招募中)return#84CC16;if(status已成行)return#2563EB;if(status已完成)return#059669;return#6B7280;}privategetStatusBgColor(status:string):ResourceColor{if(status招募中)return#ECFCCB;if(status已成行)return#DBEAFE;if(status已完成)return#DCFCE7;return#F3F4F6;}黄绿色招募中蓝色已成行绿色已完成灰色已取消黄绿色系页面主题色页面设计说明应用使用黄绿色作为主题色体现出行、环保、便捷的感觉。页面主要分为以下区域顶部标题数据统计区域发布拼车表单目的地筛选拼车列表报名弹窗页面采用浅灰色背景和白色卡片。出发地目的地使用箭头连接座位数使用进度条展示剩余座位人均费用使用大号绿色字体联系电话使用蓝色可点击样式。SDK 配置本项目使用 HarmonyOS API 24满足 API 23 及以上要求{ name: default, compatibleSdkVersion: 6.1.1(24), runtimeOS: HarmonyOS, targetSdkVersion: 6.1.1(24), compileSdkVersion: 6.1.1(24) }运行项目使用 DevEco Studio 打开项目然后找到entry/src/main/ets/pages/Index.ets等待项目同步完成点击右侧的Preview按钮即可查看应用效果。项目总结本文使用 HarmonyOS 和 ArkTS 实现了一个校园拼车与顺风车应用。项目实现了发布拼车、报名拼车、取消报名、完成行程、取消行程、目的地筛选、费用统计等功能。通过这个项目可以掌握ArkTS 接口定义和嵌套数据结构State状态管理拼车成团逻辑List和ForEach列表渲染座位数进度条费用计算自定义Builder组件HarmonyOS 出行类应用布局后续还可以加入实时定位、路线规划、在线支付、行程评价、实名认证、保险购买、紧急联系人和行程分享等功能。
