鸿蒙 ArkTS 实战：随身行李称重的限重解析、物品清单、启用状态与剩余重量-二趣网

鸿蒙 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等组件组织页面。

2.3 控件组合

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

三、状态字段设计

3.1 字段清单

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

limitText：参与随身行李称重的输入、计算、列表或展示。
bagText：参与随身行李称重的输入、计算、列表或展示。
itemName：参与随身行李称重的输入、计算、列表或展示。
itemWeightText：参与随身行李称重的输入、计算、列表或展示。
items：参与随身行李称重的输入、计算、列表或展示。
这些字段就是页面的数据模型，也是调试时最先需要观察的对象。

3.2 响应式刷新

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

3.3 命名与语义

命名越贴近业务，维护越轻松。
随身行李称重中的字段名和页面输入项相互对应，阅读时能快速定位控件背后的数据来源。

状态类别	代表字段	页面作用
主输入	`limitText`	影响核心流程
文本或数值输入	TextInput 或 Slider 绑定字段	接收用户调整
列表状态	records、plants、items、plans、logs	承载多条业务记录
派生结果	函数返回值	输出最终结果

四、核心计算与业务表达

4.1 计算规则

parseValue 将文本转数字，非法输入按 0 处理。
parseLimit 保护限重，非法或非正值回到 7kg。
activeWeight 从空包重量开始累加启用物品。
toggleItem 用 map 返回新的数组状态。
这些规则让页面从输入表单变成真正能输出判断或记录结果的工具。

4.2 边界处理

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

4.3 结果解释

结果解释要用用户能理解的语言。
在随身行李称重中，最终展示不是公式本身，而是围绕随身行李重量管理的可读结果。

五、布局结构拆解

5.1 根容器

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

5.2 内容分区

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

5.3 尺寸约束

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

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

六、交互链路分析

6.1 用户动作

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

6.2 事件回调

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

6.3 界面更新

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