HarmonyOS ArkTS 实战实现一个校园意见反馈与处理进度应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园意见反馈与处理进度应用。应用可以提交校园生活、设施环境、餐饮服务和网络服务等问题反馈记录问题位置和优先级并提供受理、处理、解决、筛选和数据统计等功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。功能介绍本项目实现了以下功能提交校园问题和建议填写问题标题和问题位置选择反馈类别选择普通或紧急优先级受理学生反馈更新问题处理状态确认问题已经解决按待受理、处理中和已解决筛选统计全部反馈、待受理和处理中数量删除无效反馈记录定义数据结构首先定义校园反馈记录的数据结构interfaceFeedbackRecord{id:number;title:string;location:string;category:string;priority:string;status:string;}字段说明如下id反馈记录的唯一编号title问题或建议标题location问题发生的位置category问题类别priority问题优先级status当前处理状态初始化页面状态使用State保存输入内容、反馈类别、优先级和筛选条件StateprivatetitleText:string;StateprivatelocationText:string;Stateprivatecategory:string生活服务;Stateprivatepriority:string普通;StateprivatefilterType:string全部;StateprivatenextId:number6;准备一些初始数据让应用运行后可以直接展示完整效果Stateprivaterecords:FeedbackRecord[][{id:1,title:图书馆三楼饮水机缺水,location:图书馆三楼,category:生活服务,priority:普通,status:处理中},{id:2,title:教学楼走廊照明损坏,location:第二教学楼 A 区,category:设施环境,priority:紧急,status:待受理},{id:3,title:食堂排队秩序建议,location:南区食堂,category:餐饮服务,priority:普通,status:已解决},{id:4,title:校园网连接不稳定,location:五号宿舍楼,category:网络服务,priority:紧急,status:处理中}];提交校园反馈用户填写问题标题和位置后可以提交新的校园反馈privateaddRecord():void{consttitle:stringthis.titleText.trim();constlocation:stringthis.locationText.trim();if(title.length0||location.length0){return;}constrecord:FeedbackRecord{id:this.nextId,title,location,category:this.category,priority:this.priority,status:待受理};this.records[record,...this.records];this.nextId1;this.titleText;this.locationText;}新提交的反馈默认处于“待受理”状态。反馈处理状态流转校园反馈按照以下流程处理待受理 - 处理中 - 已解决使用以下方法更新反馈状态privateadvanceStatus(id:number):void{this.recordsthis.records.map((item:FeedbackRecord){if(item.idid){conststatus:stringitem.status待受理?处理中:已解决;return{id:item.id,title:item.title,location:item.location,category:item.category,priority:item.priority,status};}returnitem;});}待受理状态点击“开始处理”后变为处理中处理中状态点击“确认解决”后变为已解决。筛选反馈记录页面支持按照处理状态筛选privategetFilteredRecords():FeedbackRecord[]{if(this.filterType待受理){returnthis.records.filter((item:FeedbackRecord)item.status待受理);}if(this.filterType处理中){returnthis.records.filter((item:FeedbackRecord)item.status处理中);}if(this.filterType已解决){returnthis.records.filter((item:FeedbackRecord)item.status已解决);}returnthis.records;}筛选按钮封装如下BuilderFilterButton(text:string){Button(text).height(34).layoutWeight(1).fontSize(12).fontColor(this.filterTypetext?Color.White:#344054).backgroundColor(this.filterTypetext?#0E7490:#E8EEF7).borderRadius(8).onClick((){this.filterTypetext;});}设置问题优先级页面支持普通和紧急两种优先级BuilderPriorityButton(text:string){Button(text).height(34).layoutWeight(1).fontSize(12).fontColor(this.prioritytext?Color.White:#344054).backgroundColor(this.prioritytext?(text紧急?#D92D20:#667085):#E8EEF7).borderRadius(8).onClick((){this.prioritytext;});}紧急问题使用红色标签展示方便管理人员优先处理。统计反馈数据使用filter统计指定状态的反馈数量privategetCount(status:string):number{returnthis.records.filter((item:FeedbackRecord)item.statusstatus).length;}顶部统计区域展示全部反馈、待受理和处理中数量this.StatCard(全部反馈,${this.records.length},#0E7490,#ECFEFF);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:FeedbackRecord)item.id!id);}删除后反馈列表和顶部统计数据会自动更新。使用列表展示反馈使用List和ForEach渲染筛选后的反馈List({space:10}){ForEach(this.getFilteredRecords(),(item:FeedbackRecord){ListItem(){this.FeedbackCard(item)}},(item:FeedbackRecord)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 页面布局后续还可以加入图片上传、问题评论、匿名反馈、处理人员分配、消息通知和本地数据持久化等功能。