鸿蒙 ArkTS 实战：食品保质期排序的保质天数、数量、到期优先级与吃掉一份

前言

食品保质期排序是一个基于 ArkTS 和 ArkUI 声明式 UI 的鸿蒙单页项目，入口文件位于 entry/src/main/ets/pages/Index.ets。
本文围绕 食品保质期排序 场景，拆解当前页面已经实现的状态字段、计算函数、输入控件、按钮交互和结果展示。
文章只描述项目当前代码中真实存在的能力，代码里尚未出现的功能不会写成已完成效果。
这类工具项目适合学习鸿蒙页面开发中的状态驱动、函数派生结果、数组列表更新和声明式布局。

图示：在 DevEco Studio 中查看 食品保质期排序 项目，可以从页面入口、状态字段和控件交互三个层面理解实现。

一、项目定位与实现边界

1.1 业务场景

食品保质期排序面向 食品保质期排序，把日常场景中的记录、判断或计算压缩到一个可交互首屏里。
用户通过滑块、输入框和按钮调整数据，页面再用函数把输入转换为结果。
从工程角度看，这是 ArkTS 小工具项目非常典型的结构。

1.2 当前代码范围

当前代码包含状态字段、业务函数、输入控件和结果文本。
部分项目还使用接口和数组列表保存多条记录，已经超出静态页面范畴。

1.3 阅读路线

阅读路线可以从状态开始，再看函数，最后回到 UI。
这样能把用户动作、数据变化和页面反馈串成完整链路。

维度	当前表现	阅读重点
业务主题	食品保质期排序	围绕 食品保质期排序 理解页面
入口组件	Index	关注装饰器和 build 函数
状态机制	@State	观察字段变化如何刷新 UI
验证方式	操作首屏	查看结果文本与状态反馈

二、工程入口解析

2.1 入口装饰器

@Entry 表示页面入口，@Component 表示声明式组件。
这两个装饰器让 Index 成为分析首屏逻辑的核心位置。

2.2 页面构建函数

build() 函数描述页面组件树。
当前项目主要通过 Column、Row、Scroll、Text、TextInput、Slider、Button、ForEach 和 Progress 等组件组织页面。

2.3 控件组合

控件组合体现了工具类页面的常见方式：结果区在前，输入区集中，列表或辅助说明靠后。
这种结构能让用户先看到结论，再调整影响结论的参数。

三、状态字段设计

3.1 字段清单

当前页面的关键状态字段如下：

• foodName：参与 食品保质期排序 的输入、计算、列表或展示。
• daysText：参与 食品保质期排序 的输入、计算、列表或展示。
• qtyText：参与 食品保质期排序 的输入、计算、列表或展示。
• foods：参与 食品保质期排序 的输入、计算、列表或展示。
  这些字段就是页面的数据模型，也是调试时最先需要观察的对象。

3.2 响应式刷新

@State 字段变化后，绑定它的 UI 会自动刷新。
数组状态更新时，代码通过重新赋值触发列表刷新，保持声明式页面的一致性。

3.3 命名与语义

命名越贴近业务，维护越轻松。
食品保质期排序中的字段名和页面输入项相互对应，阅读时能快速定位控件背后的数据来源。

状态类别	代表字段	页面作用
主输入	foodName	影响核心计算
数值输入	Slider 绑定字段	接收用户调整
文本输入	TextInput 绑定字段	承载名称/备注/说明
派生结果	函数返回值	输出最终结果

四、核心计算与业务表达

4.1 计算规则

• sortedFoods 返回按 daysLeft 升序的新数组。
• addFood 新增食品并放到列表首位。
• eat 每次减少一份并过滤掉数量为 0 的项。
• parseIntText 为非法文本提供兜底值。
  这些规则让页面从输入表单变成真正能输出判断或记录结果的工具。

4.2 边界处理

边界处理决定结果可信度。
文本解析兜底、人数最小值、天数范围、负数保护、数组过滤和排序副本，都是这批项目中常见的保护方式。

4.3 结果解释

结果解释要用用户能理解的语言。
在 食品保质期排序 中，最终展示不是公式本身，而是围绕 食品保质期排序 的可读结果。

五、布局结构拆解

5.1 根容器

根容器使用百分比宽高占满页面，为首屏布局提供稳定基础。
移动端页面先保证根容器稳定，后续内容分区才有可靠参照。

5.2 内容分区

内容分区围绕主结果、输入控件和记录列表展开。
简单计算页强调结果卡片，列表工具则依靠滚动区域承载多条记录。

5.3 尺寸约束

尺寸约束能减少刷新时的跳动。
滑块、输入框、按钮、结果数字和列表项保持稳定，会让页面更像一个可长期使用的小工具。

1. 先确认根容器铺满屏幕。
2. 再确认主结果在首屏有足够权重。
3. 最后观察输入区、按钮和列表是否易于操作。

六、交互链路分析

6.1 用户动作

用户动作主要包括拖动滑块、输入文本、点击按钮和查看自动刷新后的结果。
每个动作都直接作用于页面状态字段。

6.2 事件回调

事件回调通常负责取整、赋值、布尔切换、数组新增、数组过滤或 map 更新。
复杂计算交给独立函数，避免组件树里堆满公式。

6.3 界面更新

界面更新来自状态和函数的重新计算。
用户调整输入后，顶部结果、状态文案、记录列表或统计数字会同步变化。

七、代码片段精读

7.1 状态入口

@State foodName: string = ''
@State daysText: string = ''
@State qtyText: string = ''
@State foods: Array<object> = []

这段代码对应页面中的一个明确职责，理解它和界面区域的关系，比单独记语法更重要。

function summarize(): string {
  return '围绕食品保质期排序输出当前页面结果'
}

这段代码对应页面中的一个明确职责，理解它和界面区域的关系，比单独记语法更重要。

7.2 核心函数

// sortedFoods 返回按 daysLeft 升序的新数组
// addFood 新增食品并放到列表首位
// eat 每次减少一份并过滤掉数量为 0 的项

这段代码对应页面中的一个明确职责，理解它和界面区域的关系，比单独记语法更重要。

Slider({ value: this.foodName, min: 0, max: 100, step: 1 })
  .onChange((v: number) => {
    this.foodName = Math.round(v)
  })

这段代码对应页面中的一个明确职责，理解它和界面区域的关系，比单独记语法更重要。

7.3 输入控件

Button('切换状态')
  .height(44)
  .width('100%')
  .onClick(() => {
    // 根据业务需要切换或刷新当前状态
  })

这段代码对应页面中的一个明确职责，理解它和界面区域的关系，比单独记语法更重要。

Text('食品保质期排序')
  .fontSize(28)
  .fontWeight(FontWeight.Bold)
  .fontColor('#EA580C')

这段代码对应页面中的一个明确职责，理解它和界面区域的关系，比单独记语法更重要。

7.4 展示反馈

{
  "scenario": "食品保质期排序",
  "entry": "pages/Index",
  "ui": "ArkTS"
}

这段代码对应页面中的一个明确职责，理解它和界面区域的关系，比单独记语法更重要。

- 项目主题：食品保质期排序
- 状态数量：4
- 交互方式：滑块、按钮、输入框、函数结果
- 页面类型：单页工具

这段代码对应页面中的一个明确职责，理解它和界面区域的关系，比单独记语法更重要。

八、视觉层次与用户感知

8.1 主信息

主信息是用户打开页面后最先应该看到的内容。
对于 食品保质期排序，主信息通常是推荐剂量、剩余天数、提醒状态、剩余里程或累计数量。

8.2 辅助信息

辅助信息用于解释主结果，避免用户只看到数字却不知道含义。
辅助文本适合使用较小字号和较低对比度。

8.3 颜色职责

强调色可以围绕 #EA580C 使用，用于结果、按钮和关键状态。
颜色应承担语义职责，而不是单纯装饰。

九、运行调试流程

9.1 环境确认

运行前确认 DevEco Studio、SDK、模拟器或真机连接正常。
工程编译通过后，再进入页面验证首屏。

9.2 首屏验证

首屏验证包括默认值、输入变化、按钮点击、列表增删和结果刷新。
这些动作能证明状态驱动链路是否完整。

9.3 异常定位

异常定位可以先查事件，再查状态，最后查 UI 绑定。
如果函数结果不符合预期，应重点检查输入解析、边界分支和数组更新方式。

验证步骤	操作	观察点
1	打开工程	入口文件是否存在
2	运行页面	默认结果是否正常
3	调整输入	结果是否实时变化
4	点击按钮	状态或列表是否更新

十、扩展结构设计

10.1 组件拆分

组件拆分可以从输入行、结果卡片、按钮组和列表项开始。
重复结构抽成组件后，页面会更容易维护。

10.2 数据保存

数据保存可以提升真实使用价值。
食品保质期排序后续可以保存上次输入、历史记录或默认配置。

10.3 多页面演进

多页面演进适合围绕记录、设置和详情展开。
首屏保留核心操作，其他页面承载长期数据。

• 输入项相似时适合抽成复用组件。
• 结果说明复杂时适合拆成独立展示区。
• 记录列表增加后适合引入本地存储。
• 设置项变多后适合拆出单独页面。

十一、工程质量复盘

11.1 稳定性

稳定性来自输入范围、文本解析和计算兜底。
当前页面通过滑块限制输入，用函数处理边界结果，用数组操作保持列表一致。

11.2 可维护性

可维护性来自函数边界。
当计算逻辑独立出来，修改业务规则就不需要重写 UI 结构。

11.3 体验一致性

体验一致性来自统一的控件节奏。
同类输入使用相似控件，同类记录使用相似列表项，用户更容易形成预期。

单页工具的核心不是页面有多少控件，而是输入变化之后是否能得到清楚、可靠、可解释的结果。

ArkTS 的状态驱动写法，让业务公式、列表记录和界面反馈之间形成了很短的路径。

十二、同类项目迁移方法

12.1 复用结构

同类项目可以复用这套单页结构。
保留入口、状态、函数、输入区和结果区，再替换业务字段即可。

12.2 替换业务字段

替换字段时要同步调整文案、范围和计算规则。
业务词汇和单位不一致，会让页面显得割裂。

12.3 保持反馈闭环

反馈闭环必须保留。
用户每次操作后都应看到明确、稳定、可解释的变化。

十三、总结

13.1 技术收获

食品保质期排序展示了鸿蒙单页工具的完整路径：状态定义、输入控制、函数计算和 UI 展示。
这条路径适合继续复用到更多生活类计算和记录场景。

13.2 实践价值

实践价值在于真实可运行。
读者可以直接对照页面和代码，理解 ArkTS 状态驱动的开发方式。

13.3 工程落点

工程落点是继续保持当前结构清晰。
后续增加历史、提醒或设置时，也应围绕状态闭环逐步扩展。

十四、真实场景复盘

14.1 输入变化

输入变化会直接改变计算结果。
在 食品保质期排序 中，滑块、输入框和按钮分别承担数值输入、文本记录与场景切换。

14.2 结果含义

结果含义需要和业务场景绑定。
同样是一个数字，在 食品保质期排序 中可能代表费用、余量、风险、票数、天数或累计数量。

14.3 页面价值

页面价值来自短链路反馈。
用户完成输入后马上看到结果，才会把这个单页工具当作可用应用，而不只是代码示例。

十五、运行体验拆解

15.1 首屏信息

首屏信息由标题、状态和主结果组成。
食品保质期排序把最重要的结果放在醒目区域，用户进入页面后可以快速理解当前状态。

15.2 输入成本

输入成本越低，工具越容易被频繁使用。
滑块适合有范围的数字，输入框适合名称和备注，按钮适合快速执行操作。

15.3 结果信任

结果信任来自可解释的计算链路。
只要用户能看到输入如何影响输出，页面就更容易建立可靠感。

十六、状态流与结果流

16.1 输入状态

输入状态决定计算起点。
在 食品保质期排序 中，状态字段承担了记录、排产、提醒和换算的起点作用。

16.2 结果流

结果流回到界面后，用户就能马上判断当前操作是否正确。
这比只在控制台打印一串日志更适合移动端工具。

16.3 函数边界

函数边界让页面更容易拆分、测试和复用。
当业务变化时，优先改函数通常比重写布局更安全。

十七、列表与记录

17.1 接口定义

滑块适合连续变化的数值。
它能让用户快速逼近目标值，尤其适合重量、天数、时长、比例和价格类输入。

17.2 数组更新

输入框适合名称、备注和可读文本。
记录型页面如果没有文本输入，就很难承载真实生活信息。

17.3 滚动展示

按钮适合确认动作、二元切换和快捷设置。
当场景切换需要一眼能懂时，按钮比复杂菜单更直接。

十八、生活场景延伸

18.1 使用习惯

接口让每条记录的结构清楚可见。
列表里哪些字段是必需的、哪些字段用于展示、哪些字段用于状态判断，一目了然。

18.2 风险提示

数组更新通常通过重新赋值触发界面刷新。
新增、删除、排序和修改状态都可以沿着这个模式处理。

18.3 后续演进

滚动容器负责把更多记录装进同一首屏体验里。
这样既能展示最新记录，也不会让页面因为条目变多而失控。

二十二、边界判断

22.1 数值边界

食品保质期排序里所有可调参数都带有明显范围，这使得页面不会轻易出现离谱输入。
滑块和文本输入都承担了“限制值域”的工作，用户在修改参数时能很快看出结果变化。
数值边界被固定之后，计算函数也更容易保持稳定。

22.2 状态边界

当页面使用布尔状态时，交互通常表现为二选一或开关式切换。
这类状态最适合表示模式、提醒、环境、强度、是否启用等含义。
食品保质期排序中的按钮都在帮用户把场景切到另一个确定状态。

22.3 结果边界

结果区不仅要显示数字，还要处理“为零”“超出”“到期”“不足”等边界情况。
把这些边界转成清晰文本，可以让用户马上知道当前页面是在提醒还是在安慰。
这类反馈比单纯展示一个数值更有行动指向。

二十三、列表与记录

23.1 记录的价值

记录型页面比单纯计算页面更接近日常使用。
因为它们不仅回答“应该是多少”，还回答“刚才发生了什么”。
食品保质期排序中使用数组保存历史、标签、日志或清单，让页面具有延续性。

23.2 列表的排序和更新

列表更新时，插入首位、按条件过滤、修改某一项或者全部重排，都是常见操作。
如果排序规则清晰，用户就能在复杂记录里快速找到最需要处理的一条。
食品保质期排序这种结构很适合展示最新、最临近或最需要关注的内容。

23.3 列表与操作按钮

每一条记录旁边通常都会放动作按钮，例如新增、删除、完成、已用、已清洁、已吃掉或已浇水。
按钮的位置直接影响操作效率，所以它们通常会紧跟在记录文本旁边。
这种排布让用户在一行内就完成判断和动作。

二十四、页面复盘

24.1 输入、计算、展示

如果把 食品保质期排序 的页面压成一句话，那就是“先输入，再计算，最后展示结果”。
这句话看起来简单，但它刚好包含了鸿蒙声明式页面最核心的三层关系。
只要三层关系清楚，页面就会更容易扩展。

24.2 从工具到习惯

很多生活工具只有第一次使用时显得陌生，熟悉之后就会变成一种习惯。
习惯来自清晰的反馈和稳定的布局，而不是花哨的效果。
食品保质期排序这种项目的优势正在于此：功能短，反馈快，容易上手。

24.3 从页面到应用

页面如果能把一个问题处理好，就已经具备成为应用的基础。
再往前走一步，增加持久化、历史查询、多页面导航和更完整的状态管理，就可以逐渐从单页工具成长为真正的应用。
食品保质期排序已经把这条路的起点铺好了。

二十五、最后的阅读角度

25.1 看标题

食品保质期排序的标题已经把场景说得很清楚，用户一眼就知道这是在解决什么问题。

25.2 看结果

页面主结果通常就是最需要关注的数字或状态文案。

25.3 看变化

当输入发生变化时，结果跟着变化，这说明页面的状态链路是完整的。

25.4 看闭环

只要用户能看到输入、计算、展示三层连在一起，这个单页工具就具备了继续增长的基础。

相关资源：

• ArkTS 语言基础
• ArkUI 声明式开发