HarmonyOS ArkTS 实战实现一个校园停车位预约与车辆出入记录应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园停车位预约与车辆出入记录应用。应用可以登记校园停车位记录车位编号、停车区域、车辆类型和车牌信息并提供车位预约、车辆入场、车辆离场、状态筛选和数据统计等功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。功能介绍本项目实现了以下功能登记新的校园停车位设置车位编号和停车区域选择电动车或小汽车类型填写预约车辆号牌预约空闲车位确认车辆入场登记车辆离场按空闲、已预约和使用中筛选车位统计全部车位、空闲车位和使用中车位删除不再使用的车位记录定义数据结构首先定义停车位记录的数据结构interfaceParkingRecord{id:number;space:string;area:string;plate:string;vehicleType:string;status:string;}字段说明如下id车位记录的唯一编号space车位编号area停车区域plate预约车辆号牌vehicleType车辆类型status车位当前状态初始化页面状态使用State保存输入内容、车辆类型和筛选条件StateprivatespaceText:string;StateprivateareaText:string;StateprivateplateText:string;StateprivatevehicleType:string电动车;StateprivatefilterType:string全部;StateprivatenextId:number6;准备初始车位数据Stateprivaterecords:ParkingRecord[][{id:1,space:A-018,area:图书馆地下停车场,plate:等待预约,vehicleType:小汽车,status:空闲},{id:2,space:B-032,area:东区宿舍车棚,plate:粤B·E2861,vehicleType:电动车,status:已预约},{id:3,space:C-006,area:体育馆北侧停车区,plate:粤A·Q7529,vehicleType:小汽车,status:使用中}];添加停车位用户填写车位编号和停车区域后可以添加新的停车位privateaddRecord():void{constspace:stringthis.spaceText.trim();constarea:stringthis.areaText.trim();if(space.length0||area.length0){return;}constrecord:ParkingRecord{id:this.nextId,space,area,plate:等待预约,vehicleType:this.vehicleType,status:空闲};this.records[record,...this.records];this.nextId1;this.spaceText;this.areaText;}新添加的停车位默认处于空闲状态。实现车位预约和车辆入场车位状态按下面的顺序流转空闲 - 已预约 - 使用中 - 车辆离场 - 空闲预约车位和确认入场使用同一个方法privateadvanceStatus(id:number):void{constplate:stringthis.plateText.trim()||校园车辆;this.recordsthis.records.map((item:ParkingRecord){if(item.idid){letstatus:string空闲;letnextPlate:string等待预约;if(item.status空闲){status已预约;nextPlateplate;}elseif(item.status已预约){status使用中;nextPlateitem.plate;}return{id:item.id,space:item.space,area:item.area,plate:nextPlate,vehicleType:item.vehicleType,status};}returnitem;});this.plateText;}当车位为空闲状态时点击按钮会预约车位当车位已预约时点击按钮会确认车辆入场。实现车辆离场车辆离场后车位重新恢复为空闲状态privateleaveParking(id:number):void{this.recordsthis.records.map((item:ParkingRecord){if(item.idid){return{id:item.id,space:item.space,area:item.area,plate:等待预约,vehicleType:item.vehicleType,status:空闲};}returnitem;});}离场后车牌信息会重置为“等待预约”。筛选车位状态页面支持按车位状态筛选privategetFilteredRecords():ParkingRecord[]{if(this.filterType空闲车位){returnthis.records.filter((item:ParkingRecord)item.status空闲);}if(this.filterType已预约){returnthis.records.filter((item:ParkingRecord)item.status已预约);}if(this.filterType使用中){returnthis.records.filter((item:ParkingRecord)item.status使用中);}returnthis.records;}筛选按钮可以封装为一个自定义组件BuilderFilterButton(text:string){Button(text).height(34).layoutWeight(1).fontSize(12).fontColor(this.filterTypetext?Color.White:#344054).backgroundColor(this.filterTypetext?#0F766E:#E8EEF7).borderRadius(8).onClick((){this.filterTypetext;});}统计车位数据使用filter统计指定状态的车位数量privategetCount(status:string):number{returnthis.records.filter((item:ParkingRecord)item.statusstatus).length;}顶部统计区域展示以下数据this.StatCard(全部车位,${this.records.length},#0F766E,#F0FDFA);this.StatCard(空闲可用,${this.getCount(空闲)},#059669,#ECFDF3);this.StatCard(正在使用,${this.getCount(使用中)},#D97706,#FFF7E8);设置状态颜色不同车位状态使用不同颜色privategetStatusColor(status:string):ResourceColor{if(status空闲){return#059669;}if(status已预约){return#2563EB;}return#D97706;}颜色对应关系如下绿色空闲可用蓝色已经预约橙色车辆正在使用紫色小汽车车位青色电动车车位删除车位记录不再需要的停车位记录可以删除privatedeleteRecord(id:number):void{this.recordsthis.records.filter((item:ParkingRecord)item.id!id);}删除后列表和顶部统计数据都会自动更新。使用列表展示车位使用List和ForEach渲染筛选后的车位List({space:10}){ForEach(this.getFilteredRecords(),(item:ParkingRecord){ListItem(){this.ParkingCard(item)}},(item:ParkingRecord)item.id.toString());}.width(100%).layoutWeight(1).scrollBar(BarState.Off);每个车位使用独立卡片展示卡片中包含车位编号、停车区域、车辆类型、车辆号牌、状态和操作按钮。页面设计说明应用使用青绿色作为主题色突出校园停车和出行管理场景。页面主要分为以下区域顶部标题和空闲车位数量车位状态统计区域停车位登记区域车位状态筛选区域停车位列表区域页面采用浅灰色背景和白色卡片不同状态采用不同颜色便于快速查看可用车位。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) }entry 模块中的运行系统也要保持一致{ apiType: stageMode, targets: [ { name: default, runtimeOS: HarmonyOS } ] }运行项目使用 DevEco Studio 打开项目然后找到entry/src/main/ets/pages/Index.ets等待项目同步完成点击右侧的Preview按钮即可查看应用效果。项目总结本文使用 HarmonyOS 和 ArkTS 实现了一个校园停车位预约与车辆出入记录应用。项目实现了车位登记、车辆类型选择、车位预约、确认入场、车辆离场、状态筛选、数据统计和删除等功能。通过这个项目可以掌握ArkTS 接口定义State状态管理TextInput输入组件List和ForEach列表渲染map和filter数组操作状态流转设计自定义Builder组件HarmonyOS 页面布局后续还可以加入车位地图、扫码入场、预约超时提醒、停车时长计算、费用结算和本地数据持久化等功能。
