中式美食的链路走到买菜清单以后下一步就是厨房执行。这个页面和普通菜谱详情页不一样。菜谱详情页通常是“看信息”厨房执行页更像“边做边跟”。用户手上可能有水、有油、有锅铲不会慢慢读长段文字。所以页面必须非常直接现在做哪一步、还剩多久、火候怎么控制、下一步是什么。这篇拆当前项目里的KitchenExecutionPage。它的核心状态只有两个making表示是否已经开始做菜currentStepIndex表示当前走到第几步。两个状态配合起来就能让预览态、制作态、当前步骤卡、下一步提示和底部按钮保持一致。本文验证环境项目版本或范围开发工具Flutter / Dart 工程配合 DevEco Studio 做 HarmonyOS 上架前体验验证Dart SDK^3.12.2Flutter 依赖flutter、cupertino_icons、flutter_lintsHarmonyOS 目标中式美食上架后的厨房执行链路HarmonyOS SDK API 20 作为后续适配目标核心文件lib/main.dart核心页面KitchenExecutionPage核心组件KitchenMakingCard、KitchenNextStepStrip、KitchenMakingBottomBar核心状态making、currentStepIndex这里讲的是当前 Flutter 工程里的实现。后面迁到 ArkUI 时最值得保留的是这个状态拆法一个状态控制页面模式一个状态控制当前步骤。先分清预览态和制作态厨房执行页刚打开时不应该直接把用户扔进倒计时。用户可能只是想先看一眼节奏。所以页面有一个making状态class_KitchenExecutionPageStateextendsStateKitchenExecutionPage{bool makingfalse;int currentStepIndex1;KitchenStepDatagetcurrentStepkitchenSteps[currentStepIndex];voidstartMaking()setState(()makingtrue);}making false时页面展示预览先做什么、关键调味、出锅判断。用户点“开始制作”以后才进入真正的步骤跟随模式。这个区别很重要。很多工具页一上来就给用户一堆步骤用户还没准备好就被推着走。中式美食这里先给预览再让用户主动开始会更符合厨房场景。当前步骤只认 currentStepIndex当前步骤通过currentStepIndex取出来KitchenStepDatagetcurrentStepkitchenSteps[currentStepIndex];然后页面里的标题、步骤卡、下一步提示都会围绕currentStep变化。我不建议给标题、卡片、底部按钮分别存一套当前步骤。这样看着灵活其实很容易错位。比如标题显示第 2 步卡片还是第 1 步底部按钮又跳到第 3 步。只要用户遇到一次就会觉得这个工具不可靠。一个 index 驱动整个页面是更稳的写法。完成一步只移动 index步骤切换也很直接voidcompleteStep(){setState((){makingtrue;currentStepIndex(currentStepIndex1).clamp(0,kitchenSteps.length-1,);});}voidpreviousStep(){setState((){makingtrue;currentStepIndex(currentStepIndex-1).clamp(0,kitchenSteps.length-1,);});}这里有两个细节。第一切换步骤时顺手把making设成true。用户点上一部或完成当前步骤本质上已经进入制作态了不应该再回到预览页。第二用clamp()卡住边界。厨房场景里用户可能连续点边界保护必须有。否则最后一步再点一次数组越界就是很低级的体验事故。步骤数据要写得像厨房话KitchenStepData不是为了服务代码而是为了服务用户做菜classKitchenStepData{constKitchenStepData({requiredthis.index,requiredthis.timeRange,requiredthis.title,requiredthis.command,requiredthis.tool,requiredthis.timer,requiredthis.icon,requiredthis.ingredients,requiredthis.heat,requiredthis.seasoning,requiredthis.doneCue,requiredthis.rescue,this.warning,});}这里我比较看重doneCue和rescue。很多菜谱只写“煮 8 分钟”“大火翻炒”但用户真正需要的是判断依据和补救办法。比如汤太油怎么办青菜出水多怎么办鱼太厚怎么办。把这些字段提前放进模型里页面就能把“怎么判断”和“出错怎么救”讲清楚。这也是中式美食和普通菜谱列表不一样的地方它不是只告诉你做法而是尽量让你在厨房里少慌一点。下一步提示要一直露出来制作态里除了当前步骤卡还有一个下一步提示KitchenNextStepStrip(step:kitchenSteps[(currentStepIndex1).clamp(0,kitchenSteps.length-1,)],isLast:currentStepIndexkitchenSteps.length-1,)这个设计很实用。用户在做当前步骤时眼睛扫一下就知道下一步要准备什么。比如现在在煮汤下一步要备鱼现在在蒸鱼下一步要准备上桌。这样能减少临场慌乱。在厨房里“下一步是什么”比“完整步骤列表”更重要。完整列表适合学习下一步提示适合执行。底部操作栏跟着模式变化页面底部根据making切换两套操作bottomNavigationBar:making?KitchenMakingBottomBar(onPrevious:previousStep,onComplete:completeStep,):KitchenPreviewBottomBar(onStart:startMaking),预览态只需要一个核心动作开始制作。制作态需要两个核心动作上一部、完成这一步。这个地方不要贪多。厨房里用户不需要一排按钮不需要复杂菜单只需要顺着走。按钮越少越不容易误操作。工程验收记录检查点当前结果预览态makingfalse时展示厨房节奏预览制作态点击开始后进入makingtrue当前步骤currentStepIndex驱动标题、步骤卡和下一步提示边界保护clamp()防止上一部或下一步越界下一步提示KitchenNextStepStrip提前告诉用户后续动作底部操作预览态和制作态使用不同底部栏本文小结厨房执行页的难点不是做出一个复杂页面而是把用户当时的状态照顾好。还没开始做时先给预览开始做以后只突出当前步骤和下一步切换步骤时只移动currentStepIndex别让多个组件各管一套状态。这个思路很简单但对生活工具特别有效。中式美食后面如果继续做家庭偏好、库存提醒、菜谱记录这个厨房执行页会成为很重要的承接点。因为用户真正产生价值不是在看到推荐那一刻而是在照着它把一桌饭做出来的时候。最后留个问题厨房执行页里的倒计时你会做成真实计时器还是先做成步骤提示和手动完成我现在更倾向先手动完成因为厨房节奏受锅具、火力和食材大小影响很大强行倒计时反而容易误导。