HarmonyOS ArkTS 实战实现一个校园食堂菜品评价与打卡应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园食堂菜品评价与打卡应用。应用可以记录校园食堂菜品、窗口、价格、菜品类别和评分并提供推荐菜品、修改评分、状态筛选、平均评分统计和删除记录等功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。功能介绍本项目实现了以下功能添加校园食堂菜品记录填写菜品名称和食堂窗口填写菜品价格和评分选择主食套餐、风味小吃、早餐面点和健康轻食推荐高分菜品取消推荐菜品修改菜品评分筛选高分推荐、强烈推荐和待评价菜品统计打卡菜品数量、推荐数量和平均评分删除菜品记录定义数据结构首先定义菜品记录的数据结构interfaceFoodRecord{id:number;dishName:string;windowName:string;price:number;score:number;category:string;status:string;}字段说明如下id菜品记录的唯一编号dishName菜品名称windowName食堂窗口名称price菜品价格score菜品评分category菜品分类status打卡和推荐状态初始化页面状态使用State保存输入内容、菜品分类和筛选条件StateprivatedishText:string;StateprivatewindowText:string;StateprivatepriceText:string;StateprivatescoreText:string;Stateprivatecategory:string主食套餐;StateprivatefilterType:string全部;StateprivatenextId:number6;准备一些初始数据让应用运行后可以直接展示完整效果Stateprivaterecords:FoodRecord[][{id:1,dishName:番茄牛腩饭,windowName:一食堂 3 号窗口,price:12,score:5,category:主食套餐,status:强烈推荐},{id:2,dishName:麻辣香锅,windowName:二食堂风味窗口,price:16,score:4,category:风味小吃,status:已打卡},{id:3,dishName:鸡蛋灌饼,windowName:南区食堂早餐档,price:6,score:4,category:早餐面点,status:已打卡},{id:4,dishName:轻食鸡胸肉沙拉,windowName:图书馆轻食站,price:18,score:5,category:健康轻食,status:强烈推荐}];添加美食记录用户填写菜品名称、窗口、价格和评分后可以新增一条美食打卡记录privateaddRecord():void{constdishName:stringthis.dishText.trim();constwindowName:stringthis.windowText.trim();constprice:numberNumber(this.priceText);constscore:numberNumber(this.scoreText);if(dishName.length0||windowName.length0||Number.isNaN(price)||price0||Number.isNaN(score)||score1||score5){return;}constrecord:FoodRecord{id:this.nextId,dishName,windowName,price,score,category:this.category,status:已打卡};this.records[record,...this.records];this.nextId1;this.dishText;this.windowText;this.priceText;this.scoreText;}评分范围限定在 1 到 5 分避免录入无效数据。推荐和取消推荐菜品用户可以将喜欢的菜品标记为“强烈推荐”privatetoggleRecommend(id:number):void{this.recordsthis.records.map((item:FoodRecord){if(item.idid){conststatus:stringitem.status强烈推荐?已打卡:强烈推荐;return{id:item.id,dishName:item.dishName,windowName:item.windowName,price:item.price,score:item.score,category:item.category,status};}returnitem;});}再次点击按钮后状态会从“强烈推荐”恢复为“已打卡”。修改菜品评分点击“修改评分”后评分会循环增加privateaddScore(id:number):void{this.recordsthis.records.map((item:FoodRecord){if(item.idid){constscore:numberitem.score5?1:item.score1;return{id:item.id,dishName:item.dishName,windowName:item.windowName,price:item.price,score,category:item.category,status:item.status待评价?已打卡:item.status};}returnitem;});}评分达到 5 分后再次点击会回到 1 分方便在预览页面中演示评分变化。筛选美食记录页面支持按高分推荐、强烈推荐和待评价筛选privategetFilteredRecords():FoodRecord[]{if(this.filterType高分推荐){returnthis.records.filter((item:FoodRecord)item.score4);}if(this.filterType强烈推荐){returnthis.records.filter((item:FoodRecord)item.status强烈推荐);}if(this.filterType待评价){returnthis.records.filter((item:FoodRecord)item.status待评价);}returnthis.records;}筛选按钮可以封装为一个自定义组件BuilderFilterButton(text:string){Button(text).height(34).layoutWeight(1).fontSize(12).fontColor(this.filterTypetext?Color.White:#344054).backgroundColor(this.filterTypetext?#EA580C:#E8EEF7).borderRadius(8).onClick((){this.filterTypetext;});}计算平均评分统计全部菜品的平均评分privategetAverageScore():string{if(this.records.length0){return0.0;}lettotal:number0;this.records.forEach((item:FoodRecord){totalitem.score;});return(total/this.records.length).toFixed(1);}toFixed(1)可以让平均分保留一位小数。统计推荐菜品统计指定状态的菜品数量privategetCount(status:string):number{returnthis.records.filter((item:FoodRecord)item.statusstatus).length;}顶部统计区域展示打卡菜品数量、强烈推荐数量和待评价数量this.StatCard(打卡菜品,${this.records.length},#EA580C,#FFF7ED);this.StatCard(强烈推荐,${this.getCount(强烈推荐)},#059669,#ECFDF3);this.StatCard(待评价,${this.getCount(待评价)},#667085,#F2F4F7);设置菜品分类颜色不同菜品分类使用不同颜色privategetCategoryColor(category:string):ResourceColor{if(category主食套餐){return#D97706;}if(category风味小吃){return#D92D20;}if(category早餐面点){return#2563EB;}return#059669;}颜色含义如下橙色主食套餐红色风味小吃蓝色早餐面点绿色健康轻食深橙色页面主题色删除菜品记录不再需要的菜品记录可以从列表中删除privatedeleteRecord(id:number):void{this.recordsthis.records.filter((item:FoodRecord)item.id!id);}删除后菜品列表和平均评分会自动更新。使用列表展示菜品使用List和ForEach渲染筛选后的菜品List({space:10}){ForEach(this.getFilteredRecords(),(item:FoodRecord){ListItem(){this.FoodCard(item)}},(item:FoodRecord)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 页面布局后续还可以加入菜品图片、食堂地图、评论内容、收藏功能、每周菜品榜单和本地数据持久化等功能。