HarmonyOS ArkTS 实战：实现一个校园晚归登记与安全提醒应用
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:number=6;准备一些初始数据，便于运行后直接展示应用效果：
@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:string=this.nameText.trim();constdormitory:string=this.dormText.trim();constreturnTime:string=this.timeText.trim();if(studentName.length===0||dormitory.length===0||returnTime.length===0){return;}constrecord:ReturnRecord={id:this.nextId,studentName,dormitory,returnTime,reason:this.reason,status:'待审核'};this.records=[record,...this.records];this.nextId+=1;this.nameText='';this.dormText='';this.timeText='';}新提交的晚归申请默认处于“待审核”状态。
晚归状态流转
晚归登记按照以下流程更新：
待审核 -> 已登记 -> 已归寝状态更新方法如下：
privateadvanceStatus(id:number):void{this.records=this.records.map((item:ReturnRecord)=>{if(item.id===id){conststatus:string=item.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.filterType===text?Color.White:'#344054').backgroundColor(this.filterType===text?'#3730A3':'#E8EEF7').borderRadius(8).onClick(()=>{this.filterType=text;});}统计登记数据
使用filter统计指定状态的登记数量：
privategetCount(status:string):number{returnthis.records.filter((item:ReturnRecord)=>item.status===status).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.records=this.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 页面布局
后续还可以加入消息提醒、辅导员审核、定位打卡、紧急联系人和本地数据持久化等功能。