鸿蒙 ArkTS 实战：Family Taste Profile 从家庭口味档案到餐厨体验工具完整解析
鸿蒙 ArkTS 实战：Family Taste Profile 从家庭口味档案到餐厨体验工具完整解析
前言
Family Taste Profile 是一个用鸿蒙 ArkTS 实现的餐厨体验工具，主题聚焦 家庭成员、忌口、口味偏好、菜品评分和菜单推荐。它把家庭厨房、饮食记录、外出就餐和口味管理中的一个小问题，拆成输入、按钮动作、指标和反馈文案。
本文直接基于项目 Index.ets 源码展开，分析状态字段、输入组件、业务函数、反馈设计和后续扩展方式，形成一篇可以直接发布的技术文章。
餐厨类工具很适合做成单页应用：一个场景、几个输入、一个关键动作，加上一句明确反馈，就能解决真实生活里的小麻烦。
配图可用于文章首屏。正式发布时可以替换为项目真机截图，展示输入区域、指标展示和操作反馈。
一、项目定位与业务场景
1.1 应用定位
用户记录家庭成员的忌口和口味偏好，应用根据档案生成适配家庭菜单。
这个项目的优点是目标很集中，没有复杂页面跳转，所有核心动作都可以在一个页面内完成。
1.2 使用价值
| 价值 | 说明 | 页面体现 |
|---|---|---|
| 快速记录 | 把饮品、菜品、技能、偏好写下来 | TextInput |
| 即时反馈 | 点击按钮后马上看到结果 | 状态文案 |
| 指标沉淀 | 用次数、评分、库存、照片表达进度 | Dish score |
| 后续复用 | 支持再次查看和调整 | 状态字段 |
二、源码入口与结构
2.1 入口组件
项目入口是标准 ArkTS 页面。
@Entry
@Component
struct Index {
build() {
Scroll() {
Column({ space: 16 }) {
Text('Family Taste Profile')
}
}
}
}
2.2 页面结构
页面主要分为：
- 标题区：展示
Family Taste Profile。 - 输入区：承接用户填写。
- 指标区：展示
Dish score。 - 按钮区：触发保存、记录、推荐或计时。
- 反馈区：显示最终说明。
三、状态模型抽象
3.1 模型设计
从源码可以抽象出 TasteProfileState。
type TasteProfileState = {
name: string;
detail: string;
metric: string | number;
message: string;
};
3.2 实际状态代码
项目真实状态如下。
@State member: string = 'Dad';
@State avoid: string = 'No cilantro';
@State flavor: string = 'Less spicy, more garlic';
@State dishScore: number = 4;
3.3 状态职责表
| 状态 | 类型 | 职责 |
|---|---|---|
member |
状态字段 | 支撑家庭口味档案的输入、记录或反馈 |
avoid |
状态字段 | 支撑家庭口味档案的输入、记录或反馈 |
flavor |
状态字段 | 支撑家庭口味档案的输入、记录或反馈 |
dishScore |
状态字段 | 支撑家庭口味档案的输入、记录或反馈 |
menu |
状态字段 | 支撑家庭口味档案的输入、记录或反馈 |
状态字段与页面控件一一对应，方便从 UI 反查逻辑，也方便从逻辑定位页面表现。
四、默认数据与首屏体验
4.1 默认内容
| 默认项 | 字段 | 含义 |
|---|---|---|
| Dad | member | 默认家庭成员 |
| No cilantro | avoid | 默认忌口 |
4.2 默认值意义
默认值不是随便填的占位符。它让用户一打开页面就知道工具在做什么，也让开发者能立刻验证按钮动作。
- 默认输入提示业务格式。
- 默认指标让页面更完整。
- 默认反馈引导用户下一步。
五、核心业务函数
5.1 主函数代码
项目核心业务函数如下。
recommend(): void {
this.menu = this.member + ' prefers ' + this.flavor + ', avoid ' + this.avoid + '. Recommend adjusted home menu.';
}
5.2 操作流程
- 填写家庭成员
- 记录忌口和口味
- 生成菜单建议
- 根据反馈提升菜品评分
这条路径完成了从用户输入到页面反馈的核心闭环。
六、辅助动作与反馈
6.1 辅助代码
项目还包含辅助动作或展示逻辑。
Button('Score +1')
.width('100%')
.backgroundColor('#16A34A')
.onClick(() => this.dishScore = Math.min(5, this.dishScore + 1))
6.2 辅助动作价值
| 动作类型 | 价值 | 对应体验 |
|---|---|---|
| 保存 | 保留配方、档案、记录 | 便于复用 |
| 追加 | 增加照片、次数、分数 | 形成积累 |
| 提醒 | 生成风险或低库存提示 | 降低遗漏 |
| 推荐 | 根据偏好生成菜单 | 辅助决策 |
七、输入组件分析
7.1 文本输入
输入框用 onChange 同步状态。
TextInput({ text: this.member, placeholder: 'Input value' })
.onChange((value: string) => this.member = value)
7.2 数字输入
对于成本、库存、温度、评分、分钟等字段，常见处理是字符串转数字。
const value = Number(text);
if (Number.isNaN(value)) {
// keep previous result or show a friendly message
}
数字输入在这类工具里很关键，因为它直接影响指标可信度。
八、指标展示策略
8.1 核心指标
当前页面的关键指标是 Dish score。
Text('Dish score ' + 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('Family Taste Profile')
// form
// metric
// buttons
// message
}.padding(20).width('100%')
}
10.2 视觉顺序
| 顺序 | 内容 | 目的 |
|---|---|---|
| 1 | 标题 | 建立语境 |
| 2 | 输入框 | 收集数据 |
| 3 | 指标 | 呈现结果 |
| 4 | 按钮 | 触发动作 |
| 5 | 文案 | 解释状态 |
十一、运行验证流程
11.1 手工验证
可以按下面流程验证：
- 打开页面，确认标题为
Family Taste Profile。 - 查看默认输入是否正确显示。
- 修改第一个输入框。
- 点击主按钮。
- 检查指标或反馈文案是否更新。
// 手工验证伪代码
const before = 'default state';
const action = 'tap main button';
const after = 'message or metric updated';
console.info(before + ' -> ' + action + ' -> ' + after);
11.2 验证重点
| 验证点 | 预期 |
|---|---|
| 输入同步 | 状态随输入变化 |
| 主函数执行 | 按钮能触发逻辑 |
| 指标更新 | 数字或文案变化 |
| 多次点击 | 累计逻辑稳定 |
| 文案可读 | 结果清楚 |
十二、边界情况处理
12.1 常见边界
餐厨工具常见边界包括库存小于 0、评分超过 5、联系人为空、成本不是数字等。
const safeScore = Math.min(5, Math.max(1, score));
const safeStock = Math.max(0, Number(stock));
12.2 业务边界
| 场景 | 风险 | 处理方向 |
|---|---|---|
| 过敏卡信息缺失 | 外出展示不完整 | 提醒补全联系人 |
| 库存不足 | 继续使用不合理 | 显示低库存 |
| 评分溢出 | 数据不可信 | 限制 1 到 5 |
| 计时归零 | 继续扣减无意义 | 使用 Math.max |
| 菜单推荐 | 忌口遗漏 | 优先过滤限制 |
十三、扩展为完整应用
13.1 业务扩展
后续可以加入多人档案、菜谱推荐、忌口过滤、家庭投票和菜单历史。
13.2 工程抽象
可以抽象统一餐厨记录模型。
interface FoodToolRecord {
title: string;
category: string;
value: number;
note: string;
createdAt: number;
}
function createFoodToolRecord(title: string, category: string, value: number, note: string): FoodToolRecord {
return {
title,
category,
value,
note,
createdAt: Date.now()
};
}
十四、维护与优化
14.1 状态集中
当前项目规模适合把状态集中在页面组件里。后续如果加入历史记录或多个页面，再拆分数据服务。
14.2 函数职责
函数应该保持单一动作：保存、提交、计时、推荐、加分或扣减。
function formatResult(name: string, detail: string): string {
return name + ': ' + detail;
}
14.3 用户体验
反馈信息要放在按钮下方，用户点击后能立刻看到变化。
十五、工程复盘
15.1 当前实现亮点
- 状态字段与业务强相关。
- 交互路径短。
- 指标和文案反馈明确。
- 代码适合继续扩展。
- 适合作为 ArkTS 单页实践案例。
15.2 可复用经验
Family Taste Profile 的实现思路可以复用到饮品、菜谱、探店、课程、库存、过敏卡和家庭口味管理等多个场景。关键是把复杂生活信息拆成几个稳定状态。
总结
Family Taste Profile 用鸿蒙 ArkTS 实现了一个围绕 家庭口味档案 的餐厨体验工具。它通过 @State 管理输入和结果，通过 TextInput 收集用户内容，通过按钮触发业务函数，再用指标和文案完成即时反馈。
从工程角度看，这个项目已经具备单页工具的完整闭环。继续加入历史记录、图片、模板、提醒或本地存储，都可以沿着当前结构自然扩展。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
补充说明：反馈文案是移动端体验的重要部分，能减少用户反复确认。
补充说明：后续持久化时，可以优先保存输入值、指标值、备注和创建时间。
补充说明：当前页面把餐厨场景拆成了清晰的状态、动作和反馈。
补充说明：指标展示让用户能快速判断一次操作是否已经记录完成。
相关资源：
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
4
0- 0
已为社区贡献142条内容
所有评论(0)