鸿蒙 ArkTS 实战：Soup Timer 从煲汤计时器到餐厨体验工具完整解析

鸿蒙 ArkTS 实战：Soup Timer 从煲汤计时器到餐厨体验工具完整解析

前言

Soup Timer 是一个用鸿蒙 ArkTS 实现的餐厨体验工具，主题聚焦汤品名称、火候步骤、食材、剩余分钟和功效备注。它把家庭厨房、饮食记录、外出就餐和口味管理中的一个小问题，拆成输入、按钮动作、指标和反馈文案。

本文直接基于项目Index.ets源码展开，分析状态字段、输入组件、业务函数、反馈设计和后续扩展方式，形成一篇可以直接发布的技术文章。

餐厨类工具很适合做成单页应用：一个场景、几个输入、一个关键动作，加上一句明确反馈，就能解决真实生活里的小麻烦。

配图可用于文章首屏。正式发布时可以替换为项目真机截图，展示输入区域、指标展示和操作反馈。

一、项目定位与业务场景

1.1 应用定位

用户记录汤品、火候步骤、食材和功效备注，通过每次减少 10 分钟推进煲汤流程。

这个项目的优点是目标很集中，没有复杂页面跳转，所有核心动作都可以在一个页面内完成。

1.2 使用价值

二、源码入口与结构

2.1 入口组件

项目入口是标准 ArkTS 页面。

@Entry@Componentstruct Index{build(){Scroll(){Column({space:16}){Text('Soup Timer')}}}}

2.2 页面结构

页面主要分为：

• 标题区：展示Soup Timer。
• 输入区：承接用户填写。
• 指标区：展示Minutes left。
• 按钮区：触发保存、记录、推荐或计时。
• 反馈区：显示最终说明。

三、状态模型抽象

3.1 模型设计

从源码可以抽象出SoupTimerState。

typeSoupTimerState={name:string;detail:string;metric:string|number;message:string;};

3.2 实际状态代码

项目真实状态如下。

@Statesoup:string='Chicken mushroom soup';@Statestep:string='High heat 10 min, low heat 50 min';@Stateingredients:string='Chicken, mushroom, ginger';@Stateminutes:number=60;@Stateeffect:string='Warm and light';

3.3 状态职责表

状态字段与页面控件一一对应，方便从 UI 反查逻辑，也方便从逻辑定位页面表现。

四、默认数据与首屏体验

4.1 默认内容

4.2 默认值意义

默认值不是随便填的占位符。它让用户一打开页面就知道工具在做什么，也让开发者能立刻验证按钮动作。

1. 默认输入提示业务格式。
2. 默认指标让页面更完整。
3. 默认反馈引导用户下一步。

五、核心业务函数

5.1 主函数代码

项目核心业务函数如下。

tick():void{this.minutes=Math.max(0,this.minutes-10);this.status=this.soup+' timer: '+this.minutes+' min left.';}

5.2 操作流程

1. 填写汤品名称
2. 记录火候步骤和食材
3. 查看剩余分钟
4. 每次推进 10 分钟

这条路径完成了从用户输入到页面反馈的核心闭环。

六、辅助动作与反馈

6.1 辅助代码

项目还包含辅助动作或展示逻辑。

Text(this.step).fontSize(15).fontColor('#6B7280')

6.2 辅助动作价值

七、输入组件分析

7.1 文本输入

输入框用onChange同步状态。

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

7.2 数字输入

对于成本、库存、温度、评分、分钟等字段，常见处理是字符串转数字。

constvalue=Number(text);if(Number.isNaN(value)){// keep previous result or show a friendly message}

数字输入在这类工具里很关键，因为它直接影响指标可信度。

八、指标展示策略

8.1 核心指标

当前页面的关键指标是Minutes left。

Text('Minutes left '+value).fontSize(24).fontWeight(FontWeight.Bold)

8.2 指标类型

九、反馈文案设计

9.1 文案更新

页面通过状态字段更新反馈。

this.note='Action saved.';this.status='Result updated.';

9.2 文案标准

十、布局与视觉层次

10.1 页面容器

页面使用Scroll，适合内容较多的表单工具。

Scroll(){Column({space:16}){Text('Soup Timer')// form// metric// buttons// message}.padding(20).width('100%')}

10.2 视觉顺序

十一、运行验证流程

11.1 手工验证

可以按下面流程验证：

1. 打开页面，确认标题为Soup Timer。
2. 查看默认输入是否正确显示。
3. 修改第一个输入框。
4. 点击主按钮。
5. 检查指标或反馈文案是否更新。

// 手工验证伪代码constbefore='default state';constaction='tap main button';constafter='message or metric updated';console.info(before+' -> '+action+' -> '+after);

11.2 验证重点

十二、边界情况处理

12.1 常见边界

餐厨工具常见边界包括库存小于 0、评分超过 5、联系人为空、成本不是数字等。

constsafeScore=Math.min(5,Math.max(1,score));constsafeStock=Math.max(0,Number(stock));

12.2 业务边界

十三、扩展为完整应用

13.1 业务扩展

后续可以加入真实倒计时、火候分段提醒、汤谱库、食材功效标签和完成记录。

13.2 工程抽象

可以抽象统一餐厨记录模型。

interfaceFoodToolRecord{title:string;category:string;value:number;note:string;createdAt:number;}functioncreateFoodToolRecord(title:string,category:string,value:number,note:string):FoodToolRecord{return{title,category,value,note,createdAt:Date.now()};}

十四、维护与优化

14.1 状态集中

当前项目规模适合把状态集中在页面组件里。后续如果加入历史记录或多个页面，再拆分数据服务。

14.2 函数职责

函数应该保持单一动作：保存、提交、计时、推荐、加分或扣减。

functionformatResult(name:string,detail:string):string{returnname+': '+detail;}

14.3 用户体验

反馈信息要放在按钮下方，用户点击后能立刻看到变化。

十五、工程复盘

15.1 当前实现亮点

• 状态字段与业务强相关。
• 交互路径短。
• 指标和文案反馈明确。
• 代码适合继续扩展。
• 适合作为 ArkTS 单页实践案例。

15.2 可复用经验

Soup Timer的实现思路可以复用到饮品、菜谱、探店、课程、库存、过敏卡和家庭口味管理等多个场景。关键是把复杂生活信息拆成几个稳定状态。

总结

Soup Timer用鸿蒙 ArkTS 实现了一个围绕煲汤计时器的餐厨体验工具。它通过@State管理输入和结果，通过TextInput收集用户内容，通过按钮触发业务函数，再用指标和文案完成即时反馈。

从工程角度看，这个项目已经具备单页工具的完整闭环。继续加入历史记录、图片、模板、提醒或本地存储，都可以沿着当前结构自然扩展。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。

相关资源：

• HarmonyOS 开发者官网
• ArkTS 语言基础
• ArkUI 组件开发