鸿蒙 ArkTS 实战回收物预约分类的状态驱动界面与业务计算前言回收物名称、重量、纸塑金属分类和预约记录是一个围绕日常生活场景设计的鸿蒙单页工具。本文以 entry/src/main/ets/pages/Index.ets 为入口按照页面真实代码展开重点说明状态字段、派生函数、输入控件、事件回调和结果展示之间的关系。小工具的价值在于把清楚的生活规则转换成可操作界面。输入、计算和反馈由同一组状态驱动页面行为因此保持一致。一、业务定位1.1 使用场景回收物预约分类把原本需要手工估算或分散记录的信息集中到首屏。用户通过滑块、文本框或按钮改变参数页面立即显示新的计算结果。1.2 功能闭环录入当前场景的基础数据。选择分类、模式或状态。使用函数把输入转换为结果。将结果和可读文案同步呈现。1.3 当前实现当前业务集中在 Index 组件中。状态字段使用 State 保存。规则由普通成员函数表达。事件通过 onChange 和 onClick 修改状态。本文只讨论代码中已经出现的行为。1.4 阅读维度| 层次 | 关注内容 | 页面体现 ||—|—|—|| 数据 | 状态字段和接口 | 输入与记录 || 规则 | 派生函数 | 计算与文案 || 交互 | 控件和事件 | 状态改变 || 展示 | ArkUI 组件树 | 结果与列表 |二、页面入口2.1 装饰器EntryComponentstruct Index{// 状态、规则与 build 位于同一组件}Entry 标识页面入口。Component 声明可渲染组件。Index 同时承载状态、计算方法和 build。2.2 构建函数build(){Column(){Text(结果区域)Text(参数区域)}.width(100%).height(100%)}build 描述组件树。结果区域位于前部输入控件紧随其后。2.3 容器组织Column 负责纵向分区。Row 负责横向排列。Scroll 承载可增长列表。layoutWeight 让主要文本吸收剩余宽度。三、状态模型3.1 字段清单| 状态字段 | 页面含义 | 业务作用 ||—|—|—|| itemName | 页面状态 | 参与回收物预约分类 || weightText | 页面状态 | 参与回收物预约分类 || categoryIndex | 页面状态 | 参与回收物预约分类 || items | 页面状态 | 参与回收物预约分类 |这些字段共同构成 回收物预约分类 的页面数据模型。字段名称与界面文案保持相同语义。3.2 初始状态interfaceRecycleItem{id:numbername:stringweightKg:numbercategory:stringpoints:number}初始值决定应用打开时的第一组结果。数值位于控件允许范围内。布尔值决定模式按钮的初始文案。3.3 响应式更新Slider({value:this.value,min:0,max:100,step:1}).onChange((value:number){this.valueMath.round(value)})State 改变后读取它的 UI 自动重新计算。回调中取整可以让显示值和滑块步进一致。3.4 字段职责itemName、weightText、categoryIndex、items 分别承担输入、模式、过程或结果来源。页面没有额外复制一份派生结果状态。这减少了状态不同步的可能。四、核心业务规则4.1 规则说明纸类每公斤 6 分塑料每公斤 8 分金属每公斤 15 分单条积分为重量乘倍率后四舍五入总积分为记录积分之和。parseWeight 转换公斤数pointRate 返回分类倍率addItem 新建记录totalPoints 汇总积分规则集中在具名函数中。组件树只负责读取返回值。4.2 核心实现pointRate():number{if(this.categoryIndex0)return6if(this.categoryIndex1)return8return15}该函数直接读取当前状态。每次输入变化后都会得到新的返回值。4.3 派生结果totalPoints():number{lettotal0this.items.forEach((item:RecycleItem)totalitem.points)returntotal}派生结果不需要单独保存。这让计算逻辑保持单一来源。4.4 边界保护数值输入需要落在合法范围。比例需要限制在 0 到 1 或 0 到 100。计数不能出现负数。空数组不能读取不存在的末项。列表操作应返回新的数组引用。五、输入控件5.1 滑块输入Slider({value:this.value,min:0,max:100,step:1}).onChange((value:number){this.valueMath.round(value)})Slider 适合范围明确、步进固定的参数。value 绑定页面状态。onChange 接收用户拖动后的值。5.2 文本输入TextInput({text:this.inputText,placeholder:请输入}).onChange((value:string){this.inputTextvalue})TextInput 适合名称或数字文本。写入数组前需要去掉首尾空白。数字文本进入公式前需要转换。5.3 按钮交互Button(执行操作).width(100%).height(48).onClick(()this.handleAction())Button 适合离散选择和明确命令。按钮文案可以由布尔状态或索引状态派生。5.4 项目交互removeItem(id:number):void{this.itemsthis.items.filter((item:RecycleItem)item.id!id)}这一片段体现了本项目真实的状态更新方式。回调保持短小复杂规则交给成员函数。六、结果展示6.1 结果优先结果区域位于首屏前部。字号高于参数标签。状态文字与核心数值形成层级。6.2 可读文案计算函数输出数值。映射函数输出自然语言。两者共同帮助用户理解当前状态。6.3 状态颜色| 状态 | 视觉表达 | 含义 ||—|—|—|| 正常 | 绿色或青色 | 当前结果可接受 || 中间 | 灰色或黄色 | 仍需关注参数 || 超限 | 红色或深色 | 当前需要处理 |6.4 稳定尺寸按钮使用稳定高度。结果数字使用稳定字号。卡片使用一致内边距。动态文本变化时布局不会明显跳动。七、数组与列表7.1 列表渲染ForEach(this.items,(item:RecordItem){Row(){Text(item.name).layoutWeight(1)Text(item.value.toString())}},(item:RecordItem)item.id.toString())ForEach 使用稳定 ID 作为 key。列表变化时节点复用更准确。7.2 映射更新pointRate():number{if(this.categoryIndex0)return6if(this.categoryIndex1)return8return15}0 map 适合切换单条记录状态。 没有命中的条目保持原值。 ### 7.3 过滤移除typescriptpointRate():number{if(this.categoryIndex0)return6if(this.categoryIndex1)return8return15}1filter 适合删除或消耗完毕的记录。 重新赋值让列表刷新路径清晰。 ###7.4统计派生 总量由当前数组遍历得到。 统计值不需要重复维护。 新增、修改和移除后都能得到一致结果。 ## 八、交互链路 ###8.1完整流程 用户输入名称和重量选择纸类、塑料或金属后加入清单。每条记录保存分类、重量和积分移除后总分同步变化。 ###8.2状态闭环1.页面读取初始状态。2.用户改变控件。3.回调写回State。4.派生函数重新执行。5.结果区域和列表同步刷新。 ###8.3操作反馈|操作|状态变化|可见反馈||---|---|---||调整数值|数值字段更新|结果数字变化||切换模式|索引或布尔值更新|按钮样式变化||新增记录|数组增加元素|列表与统计变化||完成操作|重置或递增|状态文案刷新|###8.4事件职责 事件回调只做赋值或调用方法。 业务判断不堆积在 build 中。 页面结构因此容易扫描。 ## 九、ArkUI 布局 ###9.1Column Column 将标题、结果、参数和列表纵向排列。 space 属性统一控制子项间距。 padding 留出触控和阅读空间。 ###9.2Row Row 把标题与关键结果并排放置。 layoutWeight 让标题区域适应剩余宽度。 数值区域保持稳定宽度。 ###9.3Scroll 记录数量可能增长时使用 Scroll。 滚动条可以隐藏但滚动能力仍然保留。 输入区域和记录区域位于同一纵向路径。 ###9.4组件职责|组件|职责|内容||---|---|---||Text|展示信息|标题、数值、状态||Slider|调整数值|时间、重量、温度||TextInput|接收文本|名称、数量||Button|执行操作|切换、添加、完成||ForEach|渲染数组|清单与设备||Scroll|承载长内容|多条记录|## 十、代码可维护性 ###10.1单一来源 输入保存在State。结果由函数计算。UI只读取状态和函数返回值。 ###10.2具名函数 parseWeight 转换公斤数pointRate 返回分类倍率addItem 新建记录totalPoints 汇总积分 函数名称直接表达业务含义。 阅读者可以从 build 反向定位规则。 ###10.3类型约束 数值字段明确使用number。 文本字段明确使用string。 记录数组通过接口固定结构。 回调参数带有显式类型。 ###10.4边界一致性 滑块范围与业务范围保持一致。 文本转换失败时使用兜底值。 数组为空时阻止无效操作。 结果格式统一保留所需小数位。 ## 十一、运行表现 ###11.1首次打开 默认状态立即生成一组可读结果。 用户不操作也能理解工具用途。 顶部结果验证公式和布局是否正常。 ###11.2参数变化 拖动滑块触发 onChange。 所有读取该状态的区域同步刷新。 页面不需要手动查找 Text 节点。 ###11.3模式变化 按钮切换索引或布尔值。 文案和颜色从新状态重新派生。 计算因子也随模式改变。 ###11.4列表变化 新增记录通常插入首位。 完成状态通过 map 更新。 删除状态通过 filter 更新。 统计函数基于最新数组重新计算。 ## 十二、真实场景映射 ###12.1信息采集 回收物名称、重量、纸塑金属分类和预约记录 是用户可以直接观察或输入的信息。 字段越贴近实际工具越容易操作。 ###12.2规则计算 纸类每公斤6分塑料每公斤8分金属每公斤15分单条积分为重量乘倍率后四舍五入总积分为记录积分之和。 公式没有隐藏在UI链式调用中。 它可以脱离界面单独验证。 ###12.3行动结果 页面不仅显示数字。 状态文字把数字转换成下一步判断。 颜色进一步强调结果层级。 ###12.4实现范围 当前页面聚焦单页交互和内存状态。 重新启动后是否保留记录不在当前实现中。 远程同步和多人共享也不在当前代码范围内。 ## 十三、总结 回收物预约分类展示了鸿蒙 ArkTS 小工具的典型实现路径-State保存输入与记录。-成员函数承载公式和状态判断。-Slider、TextInput 与 Button 修改状态。-ForEach 和数组方法管理列表。-Text、Row、Column 组织结果优先的界面。 回收物名称、重量、纸塑金属分类和预约记录 这类需求不依赖复杂架构。 关键是让数据、规则和反馈保持单向关系。 状态边界明确后页面就能用较少代码形成完整体验。**相关资源**-[ArkTS 语言基础](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts)-[ArkUI 声明式开发](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-ui-development)
