当前位置：首页 > news >正文

HarmonyOS ArkTS 实战：实现一个校园宿舍文明评比查分应用

news 2026/7/24 16:10:00

HarmonyOS ArkTS 实战：实现一个校园宿舍文明评比查分应用

项目效果

本文使用 HarmonyOS 和 ArkTS 实现一个校园宿舍文明评比查分应用。

应用可以查看宿舍评分标准，查看历史评分，查寝通知，评分申诉，并提供宿舍排名、文明宿舍公示、卫生小贴士、查寝记录等完整功能。

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

运行效果

功能介绍

评分标准查看
宿舍历史评分
查寝通知
评分详情
评分申诉
宿舍排名
文明宿舍公示
卫生小贴士
查寝记录
加分减分明细
月度统计
宿舍对比

定义数据结构

interfaceScoreRecord{id:number;dormNumber:string;date:string;score:number;grade:string;// 优秀/良好/合格/不合格inspector:string;items:{name:string;score:number;maxScore:number}[];comment:string;canAppeal:boolean;}interfaceDorm{number:string;building:string;floor:number;totalScore:number;averageScore:number;rank:number;isExcellent:boolean;}interfaceAppeal{id:number;recordId:number;reason:string;time:string;status:string;// 待处理/已通过/已驳回reply:string;}

初始化页面状态

@StateprivatetabIndex:number=0;@StateprivatemyDorm:string='1号楼302';@StateprivatemyAverageScore:number=92.5;@StateprivatemyRank:number=8;@Stateprivaterecords:ScoreRecord[]=[{id:1,dormNumber:'1号楼302',date:'2026-07-15',score:95,grade:'优秀',inspector:'张老师',items:[{name:'地面整洁',score:20,maxScore:20},{name:'床铺整理',score:19,maxScore:20},{name:'物品摆放',score:18,maxScore:20},{name:'卫生间',score:19,maxScore:20},{name:'安全用电',score:19,maxScore:20}],comment:'整体整洁，继续保持',canAppeal:false},{id:2,dormNumber:'1号楼302',date:'2026-07-08',score:88,grade:'良好',inspector:'李老师',items:[{name:'地面整洁',score:18,maxScore:20},{name:'床铺整理',score:17,maxScore:20},{name:'物品摆放',score:18,maxScore:20},{name:'卫生间',score:17,maxScore:20},{name:'安全用电',score:18,maxScore:20}],comment:'地面有少量杂物',canAppeal:false},{id:3,dormNumber:'1号楼302',date:'2026-07-22',score:94,grade:'优秀',inspector:'王老师',items:[{name:'地面整洁',score:19,maxScore:20},{name:'床铺整理',score:19,maxScore:20},{name:'物品摆放',score:19,maxScore:20},{name:'卫生间',score:18,maxScore:20},{name:'安全用电',score:19,maxScore:20}],comment:'进步明显，表扬',canAppeal:true},];@Stateprivateappeals:Appeal[]=[];@StateprivatenextId:number=10;

提交申诉

privatesubmitAppeal(recordId:number,reason:string):void{constappeal:Appeal={id:this.nextId,recordId,reason,time:newDate().toLocaleDateString(),status:'待处理',reply:''};this.appeals=[appeal,...this.appeals];this.records=this.records.map(r=>r.id===recordId?{...r,canAppeal:false}:r);this.nextId+=1;}

评分等级颜色

privategetGradeColor(grade:string):string{switch(grade){case'优秀':return'#059669';case'良好':return'#0284C7';case'合格':return'#D97706';case'不合格':return'#DC2626';default:return'#64748B';}}

评分记录卡片组件

@BuilderRecordCard(record:ScoreRecord){Column({space:10}){Row(){Text(record.date).fontSize(15).fontWeight(FontWeight.Medium).fontColor('#422006')Blank()Text(`${record.score}分`).fontSize(20).fontWeight(FontWeight.Bold).fontColor(this.getGradeColor(record.grade))Text(record.grade).fontSize(12).fontColor(Color.White).padding({left:8,right:8,top:3,bottom:3}).backgroundColor(this.getGradeColor(record.grade)).borderRadius(10).margin({left:8})}.width('100%')Flex({wrap:FlexWrap.Wrap}){ForEach(record.items,(item:{name:string;score:number;maxScore:number})=>{Text(`${item.name}${item.score}/${item.maxScore}`).fontSize(11).fontColor('#78350F').padding({left:8,right:8,top:4,bottom:4}).backgroundColor('#FEF3C7').borderRadius(8).margin({right:6,bottom:6})})}Text(`评语：${record.comment}`).fontSize(12).fontColor('#92400E').width('100%')Text(`检查人：${record.inspector}`).fontSize(11).fontColor('#B45309')if(record.canAppeal){Button('申诉').width('100%').height(34).fontSize(13).backgroundColor('#422006').margin({top:4}).onClick(()=>this.submitAppeal(record.id,'对评分有异议'))}}.width('100%').padding(16).backgroundColor('#FFFBEB').borderRadius(12)}

页面布局

build(){Column(){// 顶部宿舍信息Column({space:12}){Text(`宿舍${this.myDorm}`).fontSize(22).fontWeight(FontWeight.Bold).fontColor(Color.White)Row({space:30}){Column(){Text(`${this.myAverageScore}`).fontSize(28).fontWeight(FontWeight.Bold).fontColor(Color.White)Text('平均分').fontSize(12).fontColor('#FEF3C7')}Column(){Text(`第${this.myRank}名`).fontSize(28).fontWeight(FontWeight.Bold).fontColor('#FBBF24')Text('楼栋排名').fontSize(12).fontColor('#FEF3C7')}Column(){Text('⭐⭐⭐⭐⭐').fontSize(16)Text('文明宿舍').fontSize(12).fontColor('#FEF3C7')}}}.width('100%').padding(20).backgroundColor('#422006')// TabRow({space:20}){Text('查分记录').fontSize(16).fontWeight(this.tabIndex===0?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex===0?'#422006':'#94A3B8').onClick(()=>this.tabIndex=0)Text('评分标准').fontSize(16).fontWeight(this.tabIndex===1?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex===1?'#422006':'#94A3B8').onClick(()=>this.tabIndex=1)Text('我的申诉').fontSize(16).fontWeight(this.tabIndex===2?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex===2?'#422006':'#94A3B8').onClick(()=>this.tabIndex=2)}.width('100%').padding({left:20,right:20,top:20})if(this.tabIndex===0){List({space:12}){ForEach(this.records,(r:ScoreRecord)=>{ListItem(){this.RecordCard(r)}})}.width('100%').padding(20).layoutWeight(1)}elseif(this.tabIndex===1){List({space:10}){ListItem(){Column({space:8}){Text('一、地面整洁（20分）').fontSize(14).fontWeight(FontWeight.Medium)Text('地面干净无垃圾、无污渍，物品摆放整齐',{fontSize:12,fontColor:'#78350F'})}.width('100%').padding(14).backgroundColor('#FFFBEB').borderRadius(10)}ListItem(){Column({space:8}){Text('二、床铺整理（20分）').fontSize(14).fontWeight(FontWeight.Medium)Text('被子叠放整齐，床单平整，床上无杂物',{fontSize:12,fontColor:'#78350F'})}.width('100%').padding(14).backgroundColor('#FFFBEB').borderRadius(10)}}.width('100%').padding(20).layoutWeight(1)}else{if(this.appeals.length===0){Column(){Text('暂无申诉记录').fontSize(14).fontColor('#94A3B8')}.width('100%').layoutWeight(1).justifyContent(FlexAlign.Center)}}}.width('100%').height('100%').backgroundColor(Color.White)}