鸿蒙 ArkTS 实战：Fat Loss Meal Log 从减脂餐记录到厨房管理工具完整解析
鸿蒙 ArkTS 实战：Fat Loss Meal Log 从减脂餐记录到厨房管理工具完整解析
前言
Fat Loss Meal Log 是一个围绕餐食记录、蛋白质估算、热量备注、周记录和周报的鸿蒙 ArkTS 单页应用。项目用少量状态字段承载真实厨房场景，把记录、计算、提醒和反馈放在一个清晰页面里完成。
本文直接基于Index.ets源码展开，分析它的状态设计、输入绑定、按钮动作、指标展示和可扩展方向。内容按可发布技术文章组织，不包含作者提示或额外说明。
厨房管理工具的核心是把琐碎信息结构化：食材、时间、人数、库存、预算、提醒，都应该能被快速录入并立即反馈。
配图可用于文章首屏。真实发布时也可以替换成应用运行截图，展示输入框、指标文本、按钮和反馈文案。
一、项目定位与业务价值
1.1 应用定位
用户记录一餐内容、蛋白质克数和热量备注，添加后进入周记录，并可生成周报。
这个项目的价值在于“短路径”：用户不需要复杂配置，只要修改输入、点击按钮，就能得到有用结果。
1.2 目标拆解
| 目标 | 说明 | 页面体现 |
|---|---|---|
| 记录厨房信息 | 保存食材、菜品、计划或风险 | TextInput |
| 生成结果 | 输出费用、时间、库存或建议 | Protein / Week records |
| 行动反馈 | 按钮点击后更新状态 | Button |
| 后续扩展 | 支持历史、提醒、模板 | 状态模型 |
二、源码入口与页面骨架
2.1 入口组件
页面使用 ArkTS 标准组件声明。
@Entry@Componentstruct Index{build(){Scroll(){Column({space:16}){Text('Fat Loss Meal Log')}}}}2.2 布局结构
页面采用Scroll包裹Column，适合表单项较多的厨房工具。
Scroll(){Column({space:16}){Text('Fat Loss Meal Log')// inputs// metric// buttons// feedback}.padding(20).width('100%')}三、状态模型抽象
3.1 业务模型
从源码可以抽象出FatLossMealState。
typeFatLossMealState={title:string;metric:string|number;note:string;updatedAt?:number;};3.2 实际状态代码
项目真实状态如下。
@Statemeal:string='Chicken breast salad';@Stateprotein:string='38';@Statecalories:string='420 kcal, low oil';@StateweekMeals:number=9;3.3 状态职责
| 状态 | 类型 | 职责 |
|---|---|---|
meal | 状态字段 | 支撑减脂餐记录的输入、计算或反馈 |
protein | 状态字段 | 支撑减脂餐记录的输入、计算或反馈 |
calories | 状态字段 | 支撑减脂餐记录的输入、计算或反馈 |
weekMeals | 状态字段 | 支撑减脂餐记录的输入、计算或反馈 |
report | 状态字段 | 支撑减脂餐记录的输入、计算或反馈 |
状态字段都与页面控件直接相关，阅读源码时能很快定位每个 UI 元素的数据来源。
四、默认数据与首屏体验
4.1 默认内容
| 默认项 | 字段 | 含义 |
|---|---|---|
| Chicken breast salad | meal | 默认餐食 |
| 38 | protein | 默认蛋白质 |
4.2 首屏价值
默认数据让页面不是空白表单，而是一个能直接试用的小工具。用户打开后就能知道应该填什么、点击什么、看哪里。
- 默认输入给出格式示例。
- 默认指标让页面有结果感。
- 默认反馈解释下一步动作。
五、核心函数拆解
5.1 主逻辑
项目主函数如下。
addMeal():void{this.weekMeals++;this.report=this.meal+' recorded. Protein estimate: '+this.protein+'g.';}5.2 执行流程
- 输入餐食内容
- 填写蛋白质克数
- 补充热量备注
- 添加餐食或生成周报
这条流程就是项目的主要业务闭环：输入数据、触发函数、更新状态、刷新界面。
六、辅助动作设计
6.1 辅助代码
项目还包含辅助动作。
weeklyReport():void{this.report='Week meals: '+this.weekMeals+'. Keep protein stable and calories transparent.';}6.2 辅助动作价值
| 动作类型 | 价值 | 常见例子 |
|---|---|---|
| 记录 | 形成历史数据 | 备餐、尝试、检查 |
| 保存 | 复用常用模板 | 调味、计时、位置 |
| 提醒 | 防止遗漏和风险 | 库存、安全、过期 |
| 计算 | 降低人工心算 | 人均、克重、价格 |
七、输入组件设计
7.1 文本输入
输入框通过onChange更新状态。
TextInput({text:this.meal,placeholder:'Input value'}).onChange((value:string)=>this.meal=value)7.2 数字输入
涉及人数、分钟、预算、库存、克数、天数时，使用数字输入或转换。
letvalue=Number(text);if(Number.isNaN(value)){// keep friendly feedback}八、指标展示策略
8.1 核心指标
页面最重要的指标是Protein / Week records。
Text('Protein / Week records '+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 手工验证
可以按以下路径验证：
- 打开页面，确认标题为
Fat Loss Meal Log。 - 检查默认数据是否显示。
- 修改第一个输入框。
- 点击主按钮。
- 观察指标或反馈是否更新。
// 验证路径示例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};}十四、用户体验优化
14.1 操作路径
高频工具要让用户少输入、少选择、少等待。当前项目已经把核心路径压缩在一个页面中。
14.2 结果可见
指标要放在按钮附近，让用户点击后能马上看到变化。
14.3 风险提示
对于宝宝辅食、厨房安全、食材过期、夜宵预算这类场景，提示文案应比普通记录更具体。
十五、工程复盘
15.1 当前实现亮点
- 状态字段贴合厨房业务。
- 输入、按钮、反馈路径完整。
- 计算逻辑集中，便于验证。
- 页面结构适合继续扩展。
- 适合做鸿蒙 ArkTS 入门案例。
15.2 可复用经验
Fat Loss Meal Log的实现方式可以复用到备餐、库存、安全、健康、价格和家庭聚餐等多个场景。关键是把复杂生活问题拆成小状态和小动作。
总结
Fat Loss Meal Log用鸿蒙 ArkTS 构建了一个围绕减脂餐记录的厨房管理工具。它用@State保存页面数据，用TextInput承接用户输入，用按钮触发业务函数，再用指标和文案输出结果。
从工程角度看，这个项目已经形成了完整闭环。后续继续接入历史记录、提醒通知、图表统计或本地持久化，都可以在当前结构上继续演进。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
补充说明：后续接入本地存储时，可以优先保存输入值、指标值、备注和更新时间。
补充说明：当前实现把厨房任务拆成了可输入、可计算、可反馈的状态流。
补充说明：核心指标帮助用户快速判断当前操作是否完成或是否需要调整。
补充说明：反馈文案承担了确认和引导作用，是这类工具体验的重要部分。
相关资源：
- HarmonyOS 开发者官网
- ArkTS 语言基础
- ArkUI 组件开发