鸿蒙 ArkTS 实战Rainwater Collection 从雨水收集记录到绿色行动闭环完整解析前言Rainwater Collection 是一个基于鸿蒙 ArkTS 的单页绿色行动工具主题聚焦降雨量、储水量、用水用途、维护记录和储水反馈。它的代码结构直接、状态字段明确适合用来理解 ArkTS 中输入、计算、按钮动作和反馈文案之间的关系。本文按项目源码逐段拆解不做空泛介绍。文章会从页面入口、状态设计、默认数据、核心动作、反馈逻辑、布局结构和扩展方向展开形成一篇可以直接发布的技术文章。绿色行动类应用最重要的是把一次行为变成可见结果。用户输入一次、点击一次、看到指标变化产品闭环就成立了。这张图可作为文章配图。发布时如果有真机截图可以替换为项目运行页面更直观地展示输入区、指标区、动作按钮和反馈文案。一、项目定位与业务价值1.1 使用场景用户记录降雨量后累加储水量也可以记录用水用途和维护状态用于家庭雨水循环利用管理。这类应用不需要一开始就做复杂后台。单页应用只要把关键状态和关键动作做好就能完成轻量工具的第一版验证。1.2 目标拆解目标说明页面体现快速录入用户可以直接修改核心内容TextInput即时动作按钮触发业务函数Button指标反馈用数字或状态表达结果Storage L下一步引导文案说明操作结果状态提示二、源码入口与页面骨架2.1 入口组件项目主页面使用标准入口声明。EntryComponentstruct Index{build(){Scroll(){Column({space:16}){Text(Rainwater Collection)}}}}2.2 页面结构页面由四个核心区域组成标题区展示Rainwater Collection。输入区编辑对象、数值、地点、计划或文案。指标区展示Storage L。反馈区展示建议、状态、解释或记录结果。三、状态模型抽象3.1 模型含义从源码可以抽象出RainwaterState它代表当前页面的核心业务状态。typeRainwaterState{primary:string;metric:number;message:string;updated:boolean;};3.2 实际状态代码项目实际使用的State字段如下。Staterainfall:string12;Statestorage:number80;StateuseFor:stringBalcony plants;Statemaintenance:stringClean filter this weekend.;3.3 状态职责状态类型职责rainfall状态字段支撑 雨水收集记录 的输入、计算或反馈storage状态字段支撑 雨水收集记录 的输入、计算或反馈useFor状态字段支撑 雨水收集记录 的输入、计算或反馈maintenance状态字段支撑 雨水收集记录 的输入、计算或反馈message状态字段支撑 雨水收集记录 的输入、计算或反馈状态字段越清晰页面行为越容易预测。当前项目的字段基本都能直接映射到页面上的输入框、指标文本或反馈文案。四、默认数据与首屏体验4.1 默认内容默认项字段含义12rainfall默认降雨量80storage初始储水量4.2 首屏价值默认数据让用户一打开页面就知道应用要解决什么问题。对于雨水收集记录来说默认内容不仅是占位符也承担了使用示例的作用。用户能直接理解输入格式。页面指标不会是空白。按钮动作可以立即验证。五、核心动作函数5.1 主逻辑代码项目的核心动作如下。addRain():void{letrainNumber(this.rainfall);this.storageMath.round(rain*3);this.messageRainfall added. Storage is now this.storage L.;}5.2 动作流程输入降雨量增加储水量记录用水用途完成维护并更新提示这个流程足够短适合移动端场景。用户每次操作后都会获得一个明确反馈。六、辅助动作与二级反馈6.1 辅助逻辑除主动作外项目还提供了辅助按钮或补充函数。useWater():void{this.storageMath.max(0,this.storage-10);this.messageUsed rainwater for this.useFor.;}6.2 多动作的意义动作作用适合场景记录累计次数、积分、照片或数量行为沉淀生成生成预览、建议或说明内容生产保存保存地点、物品或计划后续复用兑换消耗积分或完成交易闭环结果七、输入组件设计7.1 TextInput 绑定状态输入框直接绑定状态字段。TextInput({text:this.rainfall,placeholder:Input value}).onChange((value:string)this.rainfallvalue)7.2 数值输入处理涉及价格、重量、功率、积分、雨量、库存等数值时需要从字符串转换为数字。constvalueNumber(inputText);if(Number.isNaN(value)){// keep state stable and show feedback}这种转换逻辑看似简单但决定了工具是否可靠。八、指标展示设计8.1 核心指标项目的核心指标是Storage L。Text(Storage L value).fontSize(24).fontWeight(FontWeight.Bold)8.2 指标选择指标类型例子产品价值积分points、rank、level强化激励数量kg、L、photos、exports表达行动结果金额income、topBid、saving量化收益状态sold、checked、preview告诉用户进度九、按钮交互与反馈文案9.1 Button 触发动作按钮是页面业务的入口。Button(Primary Action).width(100%).onClick((){// call page method})9.2 反馈文案的价值反馈文案要具体尽量包含用户刚刚操作的对象。例如“已为客厅记录灯泡替换”比“成功”更能帮助用户确认结果。对绿色行动工具来说文案本身也是产品体验的一部分。它能把一次点击转化成一次被确认的行动。十、布局与视觉层次10.1 Scroll 容器页面使用Scroll包裹内容适合输入项和按钮较多的工具页。Scroll(){Column({space:16}){Text(Rainwater Collection)// inputs// metric text// action buttons// feedback}.padding(20).width(100%)}10.2 视觉组织层级内容目的第一层标题快速识别应用第二层输入框收集用户行为第三层指标展示结果第四层按钮触发业务动作第五层文案解释操作结果十一、异常与边界处理11.1 数值边界涉及数字时要关注空值、负数和非数字。letnNumber(text);if(!Number.isFinite(n)||n0){// friendly fallback}11.2 业务边界场景风险处理方向连续点击指标快速累计给出明确记录文案空输入文案不完整使用默认提示库存扣减出现负数使用Math.max积分兑换积分不足提示不能兑换状态切换状态不一致保持单一来源十二、运行验证流程12.1 手工验证可以按下面流程验证打开页面确认标题为Rainwater Collection。检查默认输入和指标是否存在。修改第一个输入框。点击主按钮。观察指标和反馈文案是否变化。// 手工验证伪代码constbeforedefault page state;constactiontap main action;constaftermetric or message changed;console.info(before - action - after);12.2 验证重点验证点预期结果输入绑定状态随输入更新按钮动作函数被执行指标变化数字或状态刷新文案反馈操作结果明确多次操作页面仍保持一致十三、扩展为完整产品13.1 业务扩展后续可以加入雨量传感器、储水桶容量上限、用水日志、过滤器维护提醒和图表趋势。13.2 工程抽象可以抽象统一行动记录对象。interfaceActionRecord{title:string;metric:number;unit:string;message:string;createdAt:number;}functioncreateActionRecord(title:string,metric:number,unit:string,message:string):ActionRecord{return{title,metric,unit,message,createdAt:Date.now()};}统一模型可以支撑历史记录、图表统计、提醒和本地存储。十四、性能与维护建议14.1 状态数量控制单页工具不需要复杂状态库但每个状态字段必须有明确用途。无意义字段越少维护越容易。14.2 函数职责清晰主函数只做一件事记录、比较、兑换、导出或更新。辅助函数再处理补充动作。functionupdateMessage(message:string):string{returnmessage.length0?message:Ready.;}14.3 文案可维护后续如果要多语言或统一品牌口径建议把反馈文案集中管理而不是散落在多个按钮里。十五、工程复盘15.1 当前实现亮点页面结构清晰适合快速迭代。输入、指标、动作和反馈形成闭环。状态字段命名贴近业务。主函数逻辑直接便于调试。适合继续扩展为完整绿色生活应用。15.2 可复用经验Rainwater Collection的实现方式适合迁移到各种轻量工具积分、打卡、计划、记录、比较、生成、兑换和社区协作。只要把核心行动抽象成状态变化页面就能保持简洁。总结Rainwater Collection用鸿蒙 ArkTS 构建了一个围绕雨水收集记录的绿色行动闭环。它通过State保存页面数据用输入框承接用户内容用按钮触发业务函数再用指标和文案给出即时反馈。从工程角度看这个项目已经完成了单页工具最重要的部分状态清楚、动作清楚、反馈清楚。后续继续接入历史记录、图表、地图、提醒或本地持久化都可以在当前结构上平滑扩展。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。补充说明反馈文案负责告诉用户当前操作已经产生了什么变化。补充说明如果接入持久化建议优先保存核心输入、指标、反馈和时间戳。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。补充说明反馈文案负责告诉用户当前操作已经产生了什么变化。补充说明如果接入持久化建议优先保存核心输入、指标、反馈和时间戳。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。补充说明反馈文案负责告诉用户当前操作已经产生了什么变化。补充说明如果接入持久化建议优先保存核心输入、指标、反馈和时间戳。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。补充说明反馈文案负责告诉用户当前操作已经产生了什么变化。补充说明如果接入持久化建议优先保存核心输入、指标、反馈和时间戳。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。补充说明反馈文案负责告诉用户当前操作已经产生了什么变化。补充说明如果接入持久化建议优先保存核心输入、指标、反馈和时间戳。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。补充说明反馈文案负责告诉用户当前操作已经产生了什么变化。补充说明如果接入持久化建议优先保存核心输入、指标、反馈和时间戳。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。补充说明反馈文案负责告诉用户当前操作已经产生了什么变化。补充说明如果接入持久化建议优先保存核心输入、指标、反馈和时间戳。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。补充说明反馈文案负责告诉用户当前操作已经产生了什么变化。补充说明如果接入持久化建议优先保存核心输入、指标、反馈和时间戳。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。补充说明反馈文案负责告诉用户当前操作已经产生了什么变化。补充说明如果接入持久化建议优先保存核心输入、指标、反馈和时间戳。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。补充说明反馈文案负责告诉用户当前操作已经产生了什么变化。补充说明如果接入持久化建议优先保存核心输入、指标、反馈和时间戳。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。补充说明反馈文案负责告诉用户当前操作已经产生了什么变化。补充说明如果接入持久化建议优先保存核心输入、指标、反馈和时间戳。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。补充说明反馈文案负责告诉用户当前操作已经产生了什么变化。补充说明如果接入持久化建议优先保存核心输入、指标、反馈和时间戳。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。补充说明反馈文案负责告诉用户当前操作已经产生了什么变化。补充说明如果接入持久化建议优先保存核心输入、指标、反馈和时间戳。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。补充说明反馈文案负责告诉用户当前操作已经产生了什么变化。补充说明如果接入持久化建议优先保存核心输入、指标、反馈和时间戳。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。补充说明反馈文案负责告诉用户当前操作已经产生了什么变化。补充说明如果接入持久化建议优先保存核心输入、指标、反馈和时间戳。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。补充说明反馈文案负责告诉用户当前操作已经产生了什么变化。补充说明如果接入持久化建议优先保存核心输入、指标、反馈和时间戳。补充说明当前实现把用户行动压缩成一次输入和一次点击适合日常高频使用。补充说明指标展示不是装饰它让绿色行动变成可见结果。相关资源HarmonyOS 开发者官网ArkTS 语言基础ArkUI 组件开发
