今日菜单转盘鸿蒙AI应用开发实战——AI厨师一键规划三餐一、引言“今天吃什么”——这是每个家庭每天都要面对的灵魂拷问。面对有限的食材、不同的口味偏好、各种饮食禁忌规划一顿兼顾美味与营养的餐食并不容易。今日菜单转盘正是为了解决这一痛点而诞生的鸿蒙AI应用。用户只需选择用餐人数1-6人、口味偏好清淡/香辣/酸甜/重口和忌口食材多选AI即可自动生成3套完整的菜谱组合及配套采购清单让每日餐饮规划变得轻松简单。本文将从应用架构设计、鸿蒙核心技术实现、AI应用亮点、关键技术挑战、用户体验设计等维度深度剖析这款应用的开发全流程。二、应用架构设计Model-Service-Page 三层架构2.1 架构概览┌─────────────────────────────────────────────────────────┐ │ Page 层 (UI) │ │ MenuWheelPage.ets │ │ State 多选管理 / Builder 组件 / Slider / 交互处理 │ ├─────────────────────────────────────────────────────────┤ │ Service 层 (业务逻辑) │ │ MenuWheelService.ets │ │ 菜单生成算法 / 忌口过滤 / 采购清单生成 │ ├─────────────────────────────────────────────────────────┤ │ Model 层 (数据模型) │ │ MenuWheelModel.ets │ │ MenuEntry / MenuData / MWMessage / 常量定义 │ └─────────────────────────────────────────────────────────┘2.2 Model 层数据结构定义核心数据类MenuEntry一组菜品 采购清单MenuData多组菜单方案的聚合3套方案关键常量MW_TASTES4种口味清淡/香辣/酸甜/重口MW_AVOIDS10种忌口选项猪肉/牛肉/海鲜/鸡蛋/牛奶/花生/辣椒/香菜/葱姜蒜/无2.3 Service 层菜单生成算法Service 层预置了多组菜单方案根据不同的人数、口味和忌口组合返回对应的3套菜单getMenu(people:number,taste:string,avoid:string[]):MenuData{constkey${people}|${taste}|${avoid.sort().join(,)}constmap:Recordstring,MenuData{1|清淡|无:newMenuData([newMenuEntry([番茄炒蛋,清炒时蔬,米饭],[番茄2个,鸡蛋3个,...]),// ...]),// ...}}2.4 Page 层UI展示与交互Page 层通过 Slider、Flex 胶囊选择、ForEach 渲染等技术实现了人数选择、口味选择、忌口多选的完整交互流程和结果展示。三、鸿蒙技术深度解析3.1 State 多选切换实现splice/push多选功能的实现是鸿蒙状态管理的一个经典场景。在本应用中忌口选择支持多选使用State selectedAvoids: string[]数组管理选中项StateselectedAvoids:string[][]// 多选切换逻辑(item:string){constidxthis.selectedAvoids.indexOf(item)if(idx0){this.selectedAvoids.splice(idx,1)// 取消选中}else{this.selectedAvoids.push(item)// 选中}}关键实现细节indexOf检查当前项是否已在选中数组中如果已存在使用splice(idx, 1)移除取消选中如果不存在使用push(item)添加选中选中态的样式判断selected.indexOf(item) 0这种实现方式简洁高效完美支持多选场景。3.2 Flex 多选胶囊多选胶囊的 UI 渲染与单选略有不同选中态的判断基于数组索引而非等值比较Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.Start}){ForEach(items,(item:string){Text(item).fontSize(14).fontWeight(selected.indexOf(item)0?FontWeight.Bold:FontWeight.Normal).fontColor(selected.indexOf(item)0?COLOR_PRIMARY:COLOR_TEXT).backgroundColor(selected.indexOf(item)0?COLOR_SELECTED_BG:COLOR_CARD).border({width:1,color:selected.indexOf(item)0?COLOR_PRIMARY:COLOR_BORDER}).onClick((){onClick(item)})})}多选胶囊与单选胶囊的样式复用了一套设计系统仅逻辑判断方式不同保持了UI的一致性。3.3 Stepper 人数选择人数选择采用鸿蒙的Slider组件实现步进式选择1-6人Slider({value:this.selectedPeople,min:1,max:6,step:1,style:SliderStyle.InSet}).blockColor(COLOR_PRIMARY).trackColor(COLOR_BORDER).selectedColor(COLOR_PRIMARY).layoutWeight(1).onChange((value:number){this.selectedPeoplevalue})Stepper 设计的要点step: 1确保人数以整数步进SliderStyle.InSet提供内嵌式滑块样式左侧标注1、右侧标注6清晰展示选择范围当前选中值实时显示在滑块下方Text(当前选择${this.selectedPeople}人)3.4 ForEach 渲染3套菜单当菜单生成后使用 ForEach 循环渲染3套完整的菜单方案ForEach(data.menus,(menu:MenuEntry,idx:number){Column(){Row(){Text( 方案${idx 1})// 方案标题}Text( 菜品)ForEach(menu.dishes,(dish:string){Text(• ${dish})})Text( 采购清单)ForEach(menu.shopping,(item:string){Text(• ${item})})}// 卡片样式})嵌套 ForEach 的实现外层 ForEach 遍历3套菜单方案内层 ForEach 分别渲染菜品列表和采购清单形成清晰的信息层级。四、AI 应用亮点分析4.1 10种忌口食材自动过滤应用支持10种忌口食材的多选设置系统会根据用户的忌口选择自动过滤包含这些食材的菜品。例如如果选择了海鲜忌口系统会推荐不包含海鲜的菜单方案2|清淡|海鲜,辣椒 → 香菇滑鸡、清炒西兰花、米饭 3|香辣|猪肉,海鲜 → 辣子鸡、干锅花菜、酸辣汤、米饭4.2 40种菜品食材库应用内置了丰富的菜品和食材数据库覆盖了中餐常见的各种菜式主菜水煮肉片、辣子鸡丁、糖醋排骨、红烧肉、番茄炒蛋、清蒸鲈鱼、麻婆豆腐等素菜清炒时蔬、蒜蓉西兰花、凉拌黄瓜、酸辣土豆丝、干煸四季豆等主食米饭、全麦面包、粉丝等汤品紫菜蛋花汤、番茄蛋汤、豆腐汤等4.3 采购清单去重合并每个菜单方案都配备了详细的采购清单清单中的食材经过优化合并避免了重复购买// 以2人香辣口味为例[猪肉200g,四季豆300g,干辣椒20g,花椒10g,大米150g]采购清单精确到食材名称和用量方便用户一次性采购所有所需食材。4.4 忌口反向过滤逻辑应用采用反向过滤逻辑——系统优先识别用户的忌口选项然后从菜品库中筛选出不含这些食材的菜品确保推荐结果的安全性。五、关键技术挑战与解决方案5.1 挑战一多选状态的精确管理挑战忌口多选涉及数组的增删操作需要确保状态更新的准确性。解决方案使用splice和push方法直接操作 State 数组鸿蒙的响应式系统会自动检测数组变化并触发UI更新。5.2 挑战二多人份量的菜品配置挑战不同人数的用餐需要不同数量的菜品和食材分量。解决方案预置多组针对不同人数的菜单方案在 Service 层通过键值匹配返回对应人数的方案。5.3 挑战三菜单方案的多样性挑战同一口味和忌口条件下需要提供3套不同的菜单方案。解决方案每组配置都包含3个MenuEntry对象分别代表3套不同方案通过 ForEach 循环渲染展示。六、用户交互体验设计6.1 三步式交互流程应用采用清晰的三步式交互设计选择人数通过 Slider 步进选择选择口味点击胶囊选择4种口味之一选择忌口多选胶囊支持灵活组合6.2 绿色的健康主题应用采用绿色系配色#F0FDF4背景、#22C55E主题色传递健康、天然的品牌调性与美食应用的定位高度吻合。6.3 结果展示的清晰层次3套方案以垂直排列的方式展示每套方案独立成卡包含菜品列表和采购清单两个子模块用户可以快速对比选择。七、总结今日菜单转盘应用展示了鸿蒙 ArkTS 在多选状态管理、Slider步进选择、嵌套 ForEach 渲染等方面的技术能力。四个核心技术经验值得借鉴State 数组多选管理使用 splice/push 操作数组实现多选切换Flex 多选胶囊基于数组索引判断选中状态的多选标签组件Slider 步进选择通过 Slider 实现精确的数值步进选择嵌套 ForEach在多层循环中使用 ForEach 渲染复杂数据结构未来展望未来可以引入时令食材推荐、营养均衡分析、卡路里计算等功能让菜单规划更加科学合理。