HarmonyOS ArkTS 实战：实现一个校园食堂排队取餐记录应用
项目效果
本文实现一个基于 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:number=5;@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:string=this.windowText.trim();constwaitMinutes:number=Number(this.waitText);if(windowName.length===0||Number.isNaN(waitMinutes)||waitMinutes<=0){return;}constrecord:MealRecord={id:this.nextId,windowName,mealType:this.mealType,waitMinutes,taste:this.tasteType,finished:false};this.records=[record,...this.records];this.nextId+=1;this.windowText='';this.waitText='';}这里把新记录放在数组最前面，方便用户优先看到最新添加的窗口。
四、状态切换和删除
点击“完成取餐”时，只需要切换当前记录的finished状态：
privatetoggleFinished(id:number):void{this.records=this.records.map((item:MealRecord)=>{if(item.id===id){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.records=this.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.length===0){return0;}lettotal:number=0;this.records.forEach((item:MealRecord)=>{total+=item.waitMinutes;});returnMath.round(total/this.records.length);}privategetLongWaitCount():number{returnthis.records.filter((item:MealRecord)=>item.waitMinutes>=15).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 中的表单输入、数组操作、条件渲染和列表渲染。后续可以继续扩展本地存储、窗口评分、食堂分类和历史趋势统计等功能。