项目效果本文实现一个基于 HarmonyOS 和 ArkTS 的校园食堂排队取餐记录应用。应用可以记录不同食堂窗口的排队时间、用餐时段和口味评价并支持取餐状态切换、推荐窗口筛选、长队统计和平均等待时间统计。最终运行效果如下页面功能包括记录食堂窗口名称记录早餐、午餐、晚餐时段记录等待分钟数标记推荐、一般、避雷标记排队中或已取餐按全部、已取餐、排队中、推荐筛选统计已取餐数量、平均等待时间、长队窗口数量。前言校园食堂经常会出现某些窗口排队特别久、某些窗口味道稳定、某些窗口偶尔踩雷的情况。对学生来说如果能记录每次排队和取餐体验就能逐渐整理出自己的“食堂选择参考”。这个项目的业务场景比较轻量但很适合练习 ArkTS 状态管理。它涉及表单输入、数组新增、状态切换、条件筛选、列表渲染和动态统计能够覆盖单页面应用中常见的数据处理方式。一、核心数据结构每一条取餐记录使用MealRecord表示interfaceMealRecord{id:number;windowName:string;mealType:string;waitMinutes:number;taste:string;finished:boolean;}其中windowName表示食堂窗口mealType表示早餐、午餐或晚餐waitMinutes表示等待时间taste表示推荐、一般或避雷finished表示是否已经取餐。二、页面状态设计页面使用State保存输入内容、筛选条件和记录列表StateprivatewindowText:string;StateprivatewaitText:string;StateprivatemealType:string午餐;StateprivatetasteType:string推荐;StateprivatefilterType:string全部;StateprivatenextId:number5;Stateprivaterecords:MealRecord[][{id:1,windowName:一食堂盖浇饭窗口,mealType:午餐,waitMinutes:12,taste:推荐,finished:true},{id:2,windowName:二食堂面馆窗口,mealType:晚餐,waitMinutes:18,taste:一般,finished:false},{id:3,windowName:早餐包子窗口,mealType:早餐,waitMinutes:6,taste:推荐,finished:true},{id:4,windowName:麻辣烫窗口,mealType:晚餐,waitMinutes:25,taste:避雷,finished:false}];这些状态变化后ArkUI 会自动刷新页面。三、添加取餐记录添加记录时需要读取窗口名称和等待时间并把等待时间从字符串转换成数字privateaddRecord():void{constwindowName:stringthis.windowText.trim();constwaitMinutes:numberNumber(this.waitText);if(windowName.length0||Number.isNaN(waitMinutes)||waitMinutes0){return;}constrecord:MealRecord{id:this.nextId,windowName,mealType:this.mealType,waitMinutes,taste:this.tasteType,finished:false};this.records[record,...this.records];this.nextId1;this.windowText;this.waitText;}这里把新记录放在数组最前面方便用户优先看到最新添加的窗口。四、状态切换和删除点击“完成取餐”时只需要切换当前记录的finished状态privatetoggleFinished(id:number):void{this.recordsthis.records.map((item:MealRecord){if(item.idid){return{id:item.id,windowName:item.windowName,mealType:item.mealType,waitMinutes:item.waitMinutes,taste:item.taste,finished:!item.finished};}returnitem;});}删除记录使用filter()privatedeleteRecord(id:number):void{this.recordsthis.records.filter((item:MealRecord)item.id!id);}五、筛选和统计筛选逻辑如下privategetFilteredRecords():MealRecord[]{if(this.filterType已取餐){returnthis.records.filter((item:MealRecord)item.finished);}if(this.filterType排队中){returnthis.records.filter((item:MealRecord)!item.finished);}if(this.filterType推荐){returnthis.records.filter((item:MealRecord)item.taste推荐);}returnthis.records;}平均等待时间和长队窗口数量也直接从数组计算privategetAverageWait():number{if(this.records.length0){return0;}lettotal:number0;this.records.forEach((item:MealRecord){totalitem.waitMinutes;});returnMath.round(total/this.records.length);}privategetLongWaitCount():number{returnthis.records.filter((item:MealRecord)item.waitMinutes15).length;}六、页面布局说明页面主要由四部分组成顶部标题卡片展示应用名称和说明统计卡片展示已取餐、平均等待、长队窗口添加表单输入窗口名称和等待时间选择时段和口味记录列表展示每条窗口记录并支持取餐状态切换和删除。列表使用List和ForEach渲染List(){ForEach(this.getFilteredRecords(),(item:MealRecord){ListItem(){this.MealCard(item);}},(item:MealRecord)item.id.toString());}当筛选结果为空时页面显示空状态提示避免列表区域空白。七、运行测试在 DevEco Studio 中打开项目进入entry/src/main/ets/pages/Index.ets使用 Preview 预览页面。测试步骤如下输入食堂窗口名称输入等待分钟数选择早餐、午餐或晚餐选择推荐、一般或避雷点击“添加记录”点击“完成取餐”切换状态使用筛选按钮查看不同记录删除单条记录检查统计卡片是否同步变化。经过测试添加记录、状态切换、筛选、删除和统计功能均可正常运行。八、总结本文基于 HarmonyOS 和 ArkTS 实现了一个校园食堂排队取餐记录应用。项目通过State管理页面数据使用 ArkUI 完成页面布局并实现了取餐记录添加、状态切换、口味评价、筛选展示和动态统计等功能。这个项目虽然是单页面应用但业务场景具体交互逻辑完整适合用来练习 ArkTS 中的表单输入、数组操作、条件渲染和列表渲染。后续可以继续扩展本地存储、窗口评分、食堂分类和历史趋势统计等功能。