项目效果

本文实现一个基于 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;}

六、页面布局说明

页面主要由四部分组成：

1. 顶部标题卡片：展示应用名称和说明；
2. 统计卡片：展示已取餐、平均等待、长队窗口；
3. 添加表单：输入窗口名称和等待时间，选择时段和口味；
4. 记录列表：展示每条窗口记录，并支持取餐状态切换和删除。

列表使用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 预览页面。测试步骤如下：

1. 输入食堂窗口名称；
2. 输入等待分钟数；
3. 选择早餐、午餐或晚餐；
4. 选择推荐、一般或避雷；
5. 点击“添加记录”；
6. 点击“完成取餐”切换状态；
7. 使用筛选按钮查看不同记录；
8. 删除单条记录；
9. 检查统计卡片是否同步变化。

经过测试，添加记录、状态切换、筛选、删除和统计功能均可正常运行。

八、总结

本文基于 HarmonyOS 和 ArkTS 实现了一个校园食堂排队取餐记录应用。项目通过@State管理页面数据，使用 ArkUI 完成页面布局，并实现了取餐记录添加、状态切换、口味评价、筛选展示和动态统计等功能。

这个项目虽然是单页面应用，但业务场景具体，交互逻辑完整，适合用来练习 ArkTS 中的表单输入、数组操作、条件渲染和列表渲染。后续可以继续扩展本地存储、窗口评分、食堂分类和历史趋势统计等功能。