鸿蒙 ArkTS 实战：Food Allergy Card 从食物过敏卡到餐厨体验工具完整解析-港品优选

鸿蒙 ArkTS 实战：Food Allergy Card 从食物过敏卡到餐厨体验工具完整解析

前言

Food Allergy Card 是一个用鸿蒙 ArkTS 实现的餐厨体验工具，主题聚焦过敏食物、替代选项、紧急联系人和外出展示卡。它把家庭厨房、饮食记录、外出就餐和口味管理中的一个小问题，拆成输入、按钮动作、指标和反馈文案。

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

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

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

一、项目定位与业务场景

1.1 应用定位

用户填写过敏食物、可替代选项和紧急联系人，点击后生成适合外出展示的过敏卡文案。

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

1.2 使用价值

价值	说明	页面体现
快速记录	把饮品、菜品、技能、偏好写下来	`TextInput`
即时反馈	点击按钮后马上看到结果	状态文案
指标沉淀	用次数、评分、库存、照片表达进度	`Outside card`
后续复用	支持再次查看和调整	状态字段

二、源码入口与结构

2.1 入口组件

项目入口是标准 ArkTS 页面。

@Entry@Componentstruct Index{build(){Scroll(){Column({space:16}){Text('Food Allergy Card')}}}}

2.2 页面结构

页面主要分为：

标题区：展示Food Allergy Card。
输入区：承接用户填写。
指标区：展示Outside card。
按钮区：触发保存、记录、推荐或计时。
反馈区：显示最终说明。

三、状态模型抽象

3.1 模型设计

从源码可以抽象出AllergyCardState。

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

3.2 实际状态代码

项目真实状态如下。

@Stateallergen:string='Peanut';@Statesubstitute:string='Sunflower seed sauce';@Statecontact:string='Mom 13800000000';@StateshowCard:string='Tap to show travel allergy card.';

3.3 状态职责表

状态	类型	职责
`allergen`	状态字段	支撑食物过敏卡的输入、记录或反馈
`substitute`	状态字段	支撑食物过敏卡的输入、记录或反馈
`contact`	状态字段	支撑食物过敏卡的输入、记录或反馈
`showCard`	状态字段	支撑食物过敏卡的输入、记录或反馈

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

四、默认数据与首屏体验

4.1 默认内容

默认项	字段	含义
Peanut	allergen	默认过敏源
Sunflower seed sauce	substitute	默认替代项

4.2 默认值意义

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

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

五、核心业务函数

5.1 主函数代码

项目核心业务函数如下。

show():void{this.showCard='I am allergic to '+this.allergen+'. Substitute: '+this.substitute+'. Emergency: '+this.contact;}

5.2 操作流程

填写过敏食物
填写替代选项
填写紧急联系人
生成外出展示卡

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

六、辅助动作与反馈

6.1 辅助代码

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

Text(this.showCard).fontSize(18).fontColor('#B91C1C').padding(16).backgroundColor('#FFFFFF').borderRadius(8)

6.2 辅助动作价值

动作类型	价值	对应体验
保存	保留配方、档案、记录	便于复用
追加	增加照片、次数、分数	形成积累
提醒	生成风险或低库存提示	降低遗漏
推荐	根据偏好生成菜单	辅助决策

七、输入组件分析

7.1 文本输入

输入框用onChange同步状态。

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

7.2 数字输入

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

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

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

八、指标展示策略

8.1 核心指标

当前页面的关键指标是Outside card。

Text('Outside card '+value).fontSize(24).fontWeight(FontWeight.Bold)

8.2 指标类型

类型	示例	作用
次数	photos、practices、reuseCount	表达积累
评分	score、dishScore	支持复盘
库存	stock、minutes	管理资源
文案	showCard、menu、note	输出决策

九、反馈文案设计

9.1 文案更新

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

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

9.2 文案标准

标准	说明
包含对象	说清楚记录的是哪一个饮品、菜品或成员
包含结果	说清楚次数、评分或提示发生了什么变化
短而明确	适合移动端快速扫读
可继续行动	让用户知道下一步可以做什么

十、布局与视觉层次

10.1 页面容器

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

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

10.2 视觉顺序

顺序	内容	目的
1	标题	建立语境
2	输入框	收集数据
3	指标	呈现结果
4	按钮	触发动作
5	文案	解释状态

十一、运行验证流程

11.1 手工验证

可以按下面流程验证：

打开页面，确认标题为Food Allergy Card。
查看默认输入是否正确显示。
修改第一个输入框。
点击主按钮。
检查指标或反馈文案是否更新。

// 手工验证伪代码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 业务边界

场景	风险	处理方向
过敏卡信息缺失	外出展示不完整	提醒补全联系人
库存不足	继续使用不合理	显示低库存
评分溢出	数据不可信	限制 1 到 5
计时归零	继续扣减无意义	使用`Math.max`
菜单推荐	忌口遗漏	优先过滤限制

十三、扩展为完整应用

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 可复用经验

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

总结

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

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

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

补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。

相关资源：

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

企业官网建设流程全解析