鸿蒙 ArkTS 实战：Seasoning Ratio Mixer 从调味比例混合器到厨房管理工具完整解析-拓冰建站

鸿蒙 ArkTS 实战：Seasoning Ratio Mixer 从调味比例混合器到厨房管理工具完整解析

前言

Seasoning Ratio Mixer 是一个围绕调味配方、人数缩放、收藏配方和分享文案的鸿蒙 ArkTS 单页应用。项目用少量状态字段承载真实厨房场景，把记录、计算、提醒和反馈放在一个清晰页面里完成。

本文直接基于Index.ets源码展开，分析它的状态设计、输入绑定、按钮动作、指标展示和可扩展方向。内容按可发布技术文章组织，不包含作者提示或额外说明。

厨房管理工具的核心是把琐碎信息结构化：食材、时间、人数、库存、预算、提醒，都应该能被快速录入并立即反馈。

配图可用于文章首屏。真实发布时也可以替换成应用运行截图，展示输入框、指标文本、按钮和反馈文案。

一、项目定位与业务价值

1.1 应用定位

用户输入基础调味比例和用餐人数，应用按人数生成保存文案，也能复制分享文本。

这个项目的价值在于“短路径”：用户不需要复杂配置，只要修改输入、点击按钮，就能得到有用结果。

1.2 目标拆解

目标	说明	页面体现
记录厨房信息	保存食材、菜品、计划或风险	`TextInput`
生成结果	输出费用、时间、库存或建议	`People / Favorites`
行动反馈	按钮点击后更新状态	`Button`
后续扩展	支持历史、提醒、模板	状态模型

二、源码入口与页面骨架

2.1 入口组件

页面使用 ArkTS 标准组件声明。

@Entry@Componentstruct Index{build(){Scroll(){Column({space:16}){Text('Seasoning Ratio Mixer')}}}}

2.2 布局结构

页面采用Scroll包裹Column，适合表单项较多的厨房工具。

Scroll(){Column({space:16}){Text('Seasoning Ratio Mixer')// inputs// metric// buttons// feedback}.padding(20).width('100%')}

三、状态模型抽象

3.1 业务模型

从源码可以抽象出SeasoningRatioState。

typeSeasoningRatioState={title:string;metric:string|number;note:string;updatedAt?:number;};

3.2 实际状态代码

项目真实状态如下。

@StatebaseRecipe:string='Soy 2, vinegar 1, sugar 0.5';@Statepeople:string='4';@Statesaved:number=6;@StateshareText:string='Scale a seasoning recipe by people count.';

3.3 状态职责

状态	类型	职责
`baseRecipe`	状态字段	支撑调味比例混合器的输入、计算或反馈
`people`	状态字段	支撑调味比例混合器的输入、计算或反馈
`saved`	状态字段	支撑调味比例混合器的输入、计算或反馈
`shareText`	状态字段	支撑调味比例混合器的输入、计算或反馈

状态字段都与页面控件直接相关，阅读源码时能很快定位每个 UI 元素的数据来源。

四、默认数据与首屏体验

4.1 默认内容

默认项	字段	含义
Soy 2, vinegar 1, sugar 0.5	baseRecipe	默认调味比例
4	people	默认人数

4.2 首屏价值

默认数据让页面不是空白表单，而是一个能直接试用的小工具。用户打开后就能知道应该填什么、点击什么、看哪里。

默认输入给出格式示例。
默认指标让页面有结果感。
默认反馈解释下一步动作。

五、核心函数拆解

5.1 主逻辑

项目主函数如下。

scaledPeople():number{returnMath.max(1,Number(this.people));}

5.2 执行流程

输入基础配方
输入用餐人数
计算安全人数
保存配方或复制分享文案

这条流程就是项目的主要业务闭环：输入数据、触发函数、更新状态、刷新界面。

六、辅助动作设计

6.1 辅助代码

项目还包含辅助动作。

saveRecipe():void{this.saved++;this.shareText='Saved recipe for '+this.scaledPeople()+' people: '+this.baseRecipe+'.';}

6.2 辅助动作价值

动作类型	价值	常见例子
记录	形成历史数据	备餐、尝试、检查
保存	复用常用模板	调味、计时、位置
提醒	防止遗漏和风险	库存、安全、过期
计算	降低人工心算	人均、克重、价格

七、输入组件设计

7.1 文本输入

输入框通过onChange更新状态。

TextInput({text:this.baseRecipe,placeholder:'Input value'}).onChange((value:string)=>this.baseRecipe=value)

7.2 数字输入

涉及人数、分钟、预算、库存、克数、天数时，使用数字输入或转换。

letvalue=Number(text);if(Number.isNaN(value)){// keep friendly feedback}

八、指标展示策略

8.1 核心指标

页面最重要的指标是People / Favorites。

Text('People / Favorites '+value).fontSize(24).fontWeight(FontWeight.Bold)

8.2 指标作用

指标类型	使用场景	价值
数量	次数、库存、异常	明确规模
时间	计时、倒计时、天数	管理节奏
成本	预算、人均、花费	辅助决策
健康	蛋白、辅食、夜宵	支持复盘

九、反馈文案设计

9.1 文案更新

反馈文案通常通过状态字段更新。

this.status='Action finished.';this.reminder='Next step is ready.';

9.2 文案原则

原则	说明
具体	包含当前食材、菜品、位置或计划
简短	一句话说明结果
可行动	告诉用户下一步
可复盘	留下问题或原因

十、边界情况处理

10.1 数值边界

厨房工具经常有除法、扣减和阈值判断。

constsafePeople=Math.max(1,Number(people));constleft=Math.max(0,Number(stock)-1);

10.2 业务边界

场景	风险	处理方向
人数为 0	人均计算异常	使用最小值 1
库存为负	数据不可信	使用下限保护
夜宵超预算	行为失控	给替代建议
安全异常	风险扩大	明确修复提示
食材临期	浪费或安全问题	提醒解冻或处理

十一、运行验证流程

11.1 手工验证

可以按以下路径验证：

打开页面，确认标题为Seasoning Ratio Mixer。
检查默认数据是否显示。
修改第一个输入框。
点击主按钮。
观察指标或反馈是否更新。

// 验证路径示例constbefore='default state';constaction='tap main button';constafter='metric and message changed';console.info(before+' -> '+action+' -> '+after);

11.2 验证重点

验证点	预期
输入同步	状态立即变化
主函数	被按钮触发
指标	正确计算或累计
文案	明确表达结果
重复点击	状态保持合理

十二、可维护性分析

12.1 状态集中

当前页面把所有状态集中在Index组件内，对小型工具来说足够直接。

12.2 函数职责

每个函数只负责一个动作，阅读成本很低。

functionbuildMessage(name:string,action:string):string{returnname+' '+action+'.';}

12.3 扩展边界

当后续加入历史记录、图片、通知或云同步时，可以再拆出数据模型和服务层。

十三、扩展为完整应用

13.1 业务扩展

后续可以加入比例解析、自动乘算、口味标签、配方收藏夹和家庭口味模板。

13.2 工程抽象

可以抽象统一厨房任务模型。

interfaceKitchenTask{name:string;value:number;unit:string;note:string;done:boolean;}functioncreateKitchenTask(name:string,value:number,unit:string,note:string):KitchenTask{return{name,value,unit,note,done:false};}