HarmonyOS ArkTS 实战实现一个校园晚归登记与安全提醒应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园晚归登记与安全提醒应用。应用可以登记学生姓名、宿舍、预计归寝时间和晚归原因并提供审核登记、归寝确认、状态筛选和数据统计等功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。功能介绍本项目实现了以下功能新增学生晚归登记填写学生姓名和宿舍房间填写预计归寝时间选择学习活动、社团活动、校外实习和就医返校原因审核晚归登记确认学生已经归寝按待审核、未归寝和已归寝筛选统计登记总数、待审核和未归寝数量删除无效登记记录定义数据结构首先定义晚归登记的数据结构interfaceReturnRecord{id:number;studentName:string;dormitory:string;returnTime:string;reason:string;status:string;}字段说明如下id登记记录的唯一编号studentName学生姓名dormitory宿舍房间returnTime预计归寝时间reason晚归原因status当前登记状态初始化页面状态使用State保存输入内容、晚归原因和筛选条件StateprivatenameText:string;StateprivatedormText:string;StateprivatetimeText:string;Stateprivatereason:string学习活动;StateprivatefilterType:string全部;StateprivatenextId:number6;准备一些初始数据便于运行后直接展示应用效果Stateprivaterecords:ReturnRecord[][{id:1,studentName:李同学,dormitory:三号楼 305,returnTime:22:40,reason:学习活动,status:待审核},{id:2,studentName:王同学,dormitory:五号楼 418,returnTime:23:10,reason:社团活动,status:已登记},{id:3,studentName:陈同学,dormitory:二号楼 216,returnTime:22:55,reason:校外实习,status:已归寝}];添加晚归登记用户填写学生姓名、宿舍和预计归寝时间后可以提交晚归登记privateaddRecord():void{conststudentName:stringthis.nameText.trim();constdormitory:stringthis.dormText.trim();constreturnTime:stringthis.timeText.trim();if(studentName.length0||dormitory.length0||returnTime.length0){return;}constrecord:ReturnRecord{id:this.nextId,studentName,dormitory,returnTime,reason:this.reason,status:待审核};this.records[record,...this.records];this.nextId1;this.nameText;this.dormText;this.timeText;}新提交的晚归申请默认处于“待审核”状态。晚归状态流转晚归登记按照以下流程更新待审核 - 已登记 - 已归寝状态更新方法如下privateadvanceStatus(id:number):void{this.recordsthis.records.map((item:ReturnRecord){if(item.idid){conststatus:stringitem.status待审核?已登记:已归寝;return{id:item.id,studentName:item.studentName,dormitory:item.dormitory,returnTime:item.returnTime,reason:item.reason,status};}returnitem;});}待审核状态点击“通过登记”后变为已登记已登记状态点击“确认归寝”后变为已归寝。筛选晚归记录页面支持按晚归状态筛选privategetFilteredRecords():ReturnRecord[]{if(this.filterType待审核){returnthis.records.filter((item:ReturnRecord)item.status待审核);}if(this.filterType未归寝){returnthis.records.filter((item:ReturnRecord)item.status已登记);}if(this.filterType已归寝){returnthis.records.filter((item:ReturnRecord)item.status已归寝);}returnthis.records;}筛选按钮封装如下BuilderFilterButton(text:string){Button(text).height(34).layoutWeight(1).fontSize(12).fontColor(this.filterTypetext?Color.White:#344054).backgroundColor(this.filterTypetext?#3730A3:#E8EEF7).borderRadius(8).onClick((){this.filterTypetext;});}统计登记数据使用filter统计指定状态的登记数量privategetCount(status:string):number{returnthis.records.filter((item:ReturnRecord)item.statusstatus).length;}顶部统计区域展示登记总数、待审核和未归寝数量this.StatCard(登记总数,${this.records.length},#3730A3,#EEF2FF);this.StatCard(等待审核,${this.getCount(待审核)},#D97706,#FFF7E8);this.StatCard(未归寝,${this.getCount(已登记)},#2563EB,#EFF6FF);设置状态颜色不同状态使用不同颜色privategetStatusColor(status:string):ResourceColor{if(status待审核){return#D97706;}if(status已登记){return#2563EB;}return#059669;}颜色含义如下橙色等待审核蓝色已经登记但尚未归寝绿色已经安全归寝紫色页面主题色删除登记记录不再需要的晚归登记可以删除privatedeleteRecord(id:number):void{this.recordsthis.records.filter((item:ReturnRecord)item.id!id);}删除后登记列表和统计数据会自动刷新。使用列表展示记录使用List和ForEach渲染筛选后的晚归登记List({space:10}){ForEach(this.getFilteredRecords(),(item:ReturnRecord){ListItem(){this.ReturnCard(item)}},(item:ReturnRecord)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 页面布局后续还可以加入消息提醒、辅导员审核、定位打卡、紧急联系人和本地数据持久化等功能。