当前位置：首页 > news >正文

鸿蒙 ArkTS 实战：Secondhand Cycle List 从二手物品循环清单到低碳生活记录完整解析

news 2026/7/20 16:46:49

鸿蒙 ArkTS 实战：Secondhand Cycle List 从二手物品循环清单到低碳生活记录完整解析

前言

Secondhand Cycle List 是一个围绕闲置登记、估值统计、转让完成、总价值和状态更新构建的鸿蒙 ArkTS 单页应用。它的价值不在复杂页面数量，而在把日常低碳行为转化成可输入、可计算、可反馈、可持续追踪的数据。

本文直接基于项目Index.ets源码展开，解析它如何使用@State管理输入与结果，如何用TextInput接收用户记录，如何通过Button触发业务函数，以及如何把低碳行动变成清晰的页面反馈。

低碳类工具最重要的是降低记录门槛。用户只要能快速记录一次行为，并立即看到反馈，就更容易把它变成长期习惯。

上图可作为文章配图。发布时如果有真机截图，可以替换成应用首页，重点展示输入区、指标区、按钮区和反馈文案。

一、项目定位与业务目标

1.1 应用场景

用户登记闲置物品和预估价值，页面累计已上架数量、已流转数量和物品总价值。

这个项目把生活行为抽象成简单状态：用户填写信息，点击动作按钮，页面计算结果并给出反馈。这样的结构非常适合低碳习惯记录、家庭环保工具和轻量数据仪表盘。

1.2 核心目标

目标	说明	页面体现
快速输入	减少记录阻力	`TextInput`
即时计算	让行为结果可见	`Listed / Done / Value`
行动反馈	给出下一步提示	状态文案
习惯沉淀	保留累计数据	数值状态或列表

二、源码入口与页面结构

2.1 入口组件

项目主页面仍然是标准 ArkTS 入口组件。

@Entry@Componentstruct Index{build(){Scroll(){Column({space:16}){Text('Secondhand Cycle List')}}}}

2.2 页面分层

页面可以拆成五个区域：

标题区：展示Secondhand Cycle List。
输入区：填写低碳行为相关数据。
指标区：展示Listed / Done / Value等核心结果。
动作区：用按钮触发记录、分析或保存。
反馈区：显示建议、提醒或状态变化。

三、核心数据模型

3.1 模型抽象

虽然部分项目没有显式声明接口，但从状态字段可以抽象出CycleItemState。

typeCycleItemState={itemName:string;price:string;listed:number;transferred:number;valueTotal:number;};

3.2 模型价值

模型	职责	适合承载的内容
`CycleItemState`	组织页面业务状态	输入值、累计值、反馈值
`@State`字段	驱动 UI 更新	当前页面显示
业务函数	修改状态	点击按钮后的逻辑

先抽象模型，再组织页面，可以让低碳生活工具在扩展时不容易乱。

四、状态字段设计

4.1 状态代码

项目用@State保存核心数据。

@StateitemName:string='Desk lamp';@Stateprice:string='35';@Statelisted:number=4;@Statetransferred:number=1;@StatevalueTotal:number=120;

4.2 状态职责

状态	类型	职责
`itemName`	页面状态	支撑二手物品循环清单的输入、统计或反馈
`price`	页面状态	支撑二手物品循环清单的输入、统计或反馈
`listed`	页面状态	支撑二手物品循环清单的输入、统计或反馈
`transferred`	页面状态	支撑二手物品循环清单的输入、统计或反馈
`valueTotal`	页面状态	支撑二手物品循环清单的输入、统计或反馈
`status`	页面状态	支撑二手物品循环清单的输入、统计或反馈

这些状态字段覆盖了二手物品循环清单的主要交互。输入框更新字符串状态，按钮调用函数修改数值和提示，界面再自动刷新。

五、默认数据与首屏体验

5.1 默认内容

默认项	初始值	含义
Desk lamp	35	默认闲置物品
listed	4	已登记数量

5.2 默认数据的作用

默认值让页面打开后立刻可读。用户不用先填写一大堆内容，就能知道应用想记录什么、结果在哪里展示、按钮会触发什么操作。

默认文本提供示例格式。
默认数字让指标区不空。
默认提示能解释下一步动作。

六、核心计算逻辑

6.1 计算代码

本项目的核心计算或状态推导如下。

registerItem():void{letvalue=Number(this.price);this.listed++;this.valueTotal+=Number.isNaN(value)?0:value;this.status=this.itemName+' listed for give-away or sale.';}

6.2 计算含义

这段逻辑把输入值转成低碳结果。例如Listed / Done / Value可以是总碳排、节省数量、打卡次数、目标趋势或收藏数量。它让页面从“记录表单”变成“可反馈工具”。

输入	处理	输出
用户填写内容	数值转换或字符串组合	业务状态
点击按钮	调用函数	指标变化
结果状态	渲染到文本	用户反馈

七、主操作函数拆解

7.1 操作代码

用户点击按钮后，核心动作会修改多个状态字段。

markDone():void{this.transferred++;this.status='Status updated: transferred items '+this.transferred+'.';}

7.2 操作流程

输入闲置物品
填写预估价值
登记上架
标记完成流转

这个流程足够短，适合移动端。用户不需要理解复杂配置，只要记录一次行为，就能看到结果。

八、输入组件设计

8.1 TextInput 的角色

低碳工具的输入往往是文字、数字或地点名称。

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

8.2 数字输入

当字段是用量、距离、读数或估算值时，可以使用数字输入类型。

TextInput({text:'128',placeholder:'Number value'}).type(InputType.Number).onChange((value:string)=>{// update number text})

数字输入可以减少非法值，但业务函数仍然需要做Number()转换和异常处理。

九、按钮动作与即时反馈

9.1 Button 触发业务函数

页面用按钮承接主要动作。

Button('Primary Action').width('100%').onClick(()=>{// update low-carbon state})

9.2 反馈文案

反馈文案是低碳工具的灵魂。它不只是告诉用户“保存成功”，还应该告诉用户下一步怎么做。

反馈类型	示例	价值
成功记录	行为已保存	建立完成感
超标提醒	检查异常用量	指导改善
习惯建议	明天继续打卡	促进坚持
地点保存	点位已保存	方便复用

十、指标展示策略

10.1 指标文案

项目的核心指标是Listed / Done / Value，它通常用更大的字号或强调色展示。

Text('Listed / Done / Value '+value).fontSize(24).fontWeight(FontWeight.Bold)

10.2 指标设计原则

指标不宜过多。一个页面最好优先展示 1 到 3 个关键结果，让用户快速知道“我这次行为产生了什么影响”。

指标类别	适合内容	当前项目体现
累计值	次数、数量、总量	`Listed / Done / Value`
趋势值	Stable、High、Under target	状态文本
激励值	badge、rank、score	习惯反馈

十一、布局与视觉层次

11.1 Scroll + Column

低碳记录页内容会逐渐增加，用Scroll包裹更稳。

Scroll(){Column({space:16}){Text('Secondhand Cycle List')// input// metrics// actions// feedback}.padding(20).width('100%')}

11.2 背景色语义

这批应用大量使用浅绿色、浅蓝色、浅黄色背景，符合环保、节能、节水和生活记录的主题。

颜色方向	适合场景	视觉效果
浅绿色	低碳、回收、食谱	环保感
浅蓝色	节水、省电、数据分析	清爽稳定
浅黄色	打卡、堆肥、生活提醒	温和亲近

十二、运行验证流程

12.1 手工验证步骤

可以按下面流程验证项目：

打开页面，确认标题为Secondhand Cycle List。
检查默认值是否与源码一致。
修改第一个输入框。
点击主要动作按钮。
观察核心指标和反馈文案是否变化。

// 手工验证伪代码constbefore='default state';constaction='tap main button';constafter='metric and message updated';console.info(before+' -> '+action+' -> '+after);

12.2 验证重点

验证项	预期结果
输入变更	状态同步更新
按钮点击	业务函数执行
数值计算	指标发生变化
文案反馈	用户知道下一步
页面滚动	内容不被截断

十三、异常处理与边界值

13.1 数值转换

低碳工具经常把输入框里的字符串转换成数字。

letvalue=Number(inputText);if(Number.isNaN(value)){// show error message}

13.2 边界处理

需要重点关注：

空字符串。
小于等于 0 的数值。
目标值小于实际值。
连续点击按钮造成的累计变化。
文案是否能准确表达当前状态。

这些边界处理会直接影响工具可信度。

十四、扩展为完整低碳工具

14.1 业务扩展

后续可以加入图片上传、分类标签、交换状态、同城位置、交易记录和价值趋势。

14.2 工程扩展

可以抽象统一的低碳行为记录对象。

interfaceEcoAction{title:string;value:number;unit:string;note:string;createdAt:number;}functioncreateEcoAction(title:string,value:number,unit:string,note:string):EcoAction{return{title,value,unit,note,createdAt:Date.now()};}