鸿蒙 ArkTS 实战：Water Bill Meter 从水费阶梯计算到生活缴费应用完整解析

鸿蒙 ArkTS 实战：Water Bill Meter 从水费阶梯计算到生活缴费应用完整解析

前言

水费阶梯计算 是一个典型的鸿蒙 ArkTS 轻量工具页面。它围绕“根据用水吨数、基础单价和污水处理费开关计算水费，并对超过 10 吨部分加入阶梯费用。”这个真实需求，把参数输入、公式计算、状态反馈和结果展示集中在一个页面中。

本文基于 Water Bill Meter 的源码展开，重点分析@State 状态建模、Slider 数值输入、Toggle 开关状态、ForEach 列表渲染、方法封装公式和条件样式反馈。

小工具的体验重点不是功能堆叠，而是输入变化后结果能被立刻理解。

图示说明：页面由标题摘要、结果展示、参数控制和说明文案组成，适合学习 ArkTS 声明式 UI 的状态流。

一、项目场景

1.1 业务目标

根据用水吨数、基础单价和污水处理费开关计算水费，并对超过 10 吨部分加入阶梯费用。

1.2 用户路径

1. 打开页面查看默认参数。
2. 通过滑杆、开关、按钮或标签调整输入。
3. 页面立即根据状态重新计算结果。
4. 用户根据结果完成判断、估算或计划。

1.3 技术目标

二、页面入口

2.1 组件骨架

@Entry@Componentstruct Index{build(){Column(){Text('水费阶梯计算')}}}

2.2 单页结构价值

水费阶梯计算 的核心状态是 tons、basePrice、sewage。这些字段都直接影响计算结果或展示文案，集中在一个组件里能让数据流保持清楚。

2.3 页面分区

三、状态建模

3.1 State 字段

3.2 状态声明

@Entry@Componentstruct Index{@Statetons:number=12;// 用水吨数，默认 12@StatebasePrice:number=3;// 基础单价，默认 3@Statesewage:boolean=true;// 是否计算污水处理费}

3.3 状态边界

这些字段都贴近用户能够改变的业务输入。数值字段用于计算，布尔字段用于模式切换，索引字段用于固定选项。

状态设计清楚，公式才容易解释；公式清楚，页面结果才可信。

四、业务数据

4.1 静态配置

无数组字段：页面围绕用水量、单价和污水开关完成水费估算

4.2 列表渲染

ForEach(this.items,(item:string,index:number)=>{Text(item).fontSize(16).fontWeight(FontWeight.Bold).onClick(()=>{this.selected=index})})

4.3 选中态表达

.backgroundColor(this.selected===index?'#0284C7':'#FFFFFF').fontColor(this.selected===index?'#FFFFFF':'#0284C7')

列表项、结果区和参数区通过同一组状态连接，页面读起来就不会散。

五、输入控件

5.1 Slider 数值输入

Slider 适合金额、重量、百分比、容量、天数、分数等范围型参数。

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

5.2 Toggle 开关

Toggle 适合污水费、轻柔模式、季节外的二值配置等状态。

Toggle({type:ToggleType.Switch,isOn:this.enabled}).onChange((on:boolean)=>{this.enabled=on})

5.3 Button 与标签

Button 或 Text 标签适合处理重置、季节切换、完成动作等离散交互。

Button('执行').backgroundColor('#0284C7').onClick(()=>{this.count+=1})

六、交互行为

6.1 动作列表

1. Slider 调整 tons
2. Slider 调整 basePrice
3. Toggle 切换 sewage
4. bill 方法计算基础费、阶梯费和污水费

6.2 关键源码

bill():number{letextra:number=this.tons>10?(this.tons-10)*2:0returnthis.tons*this.basePrice+extra+(this.sewage?this.tons:0)}

6.3 反馈闭环

• Slider 调整 tons
• Slider 调整 basePrice
• Toggle 切换 sewage
• bill 方法计算基础费、阶梯费和污水费

用户调整输入后，状态字段马上更新；状态更新后，公式和 UI 同步刷新。这就是声明式 UI 最直观的优势。

七、公式解析

7.1 核心公式

bill=tons*basePrice+max(tons-10,0)*2+(sewage?tons:0)

7.2 方法封装

当公式包含边界处理、条件判断或多项合计时，封装为方法可以让 build 方法更清晰。

privatecalc():number{returnMath.round(1)}

7.3 结果渲染

Text('结果：'+String(value)).fontSize(40).fontWeight(FontWeight.Bold).fontColor('#0284C7')

结果展示必须带单位，例如元、kcal、吨、PSI、kg、ml、百分比或分/天。

八、视觉设计

8.1 大数字

水费阶梯计算 的核心结果应该用大字号展示，让用户无需阅读大量说明就能看懂当前状态。

8.2 图形容器

Stack 和 Circle 能让结果区形成仪表盘效果。

Stack(){Circle().width(200).height(200).fill('#F8FAFC')Text('核心结果')}

8.3 条件颜色

.fontColor(this.warning?'#DC2626':'#0284C7')

8.4 文案提示

Text(this.done?'已完成':'待处理')

好的文案会把数字结果转成用户能行动的提示。

九、布局策略

9.1 上下结构

上下结构适合先展示结果，再逐项调整参数。

9.2 左右结构

左右结构适合左侧突出结果，右侧集中放滑杆。

9.3 信息层级

十、调试路径

10.1 手动验证

1. 检查默认状态是否与源码一致。
2. 调整每个 Slider、Toggle 或标签。
3. 确认公式结果即时刷新。
4. 测试边界值和条件分支。

10.2 日志辅助

Button('调试').onClick(()=>{console.info('state changed')})

10.3 问题定位

十一、工程扩展

11.1 历史记录

可以保存每次计算结果，形成价格、运动、用水、购物或学习记录。

interfaceHistoryItem{title:stringinput:stringresult:stringcreatedAt:string}

11.2 本地缓存

工具页面常会反复使用同一组参数，本地缓存可以减少重复输入。

11.3 分享结果

{"tool":"水费阶梯计算","state":"tons、basePrice、sewage","result":"calculated"}

十二、体验优化

12.1 单位清晰

金额、折扣、热量、吨数、胎压、重量、天数、百分比和分数都要紧跟单位展示。

12.2 范围合理

Slider 的 min、max 和 step 要贴近真实使用场景，避免调整成本过高。

12.3 反馈直接

输入变化后结果必须立即刷新，工具页面不适合把结果藏在提交动作之后。

十三、完整片段

13.1 状态骨架

@Entry@Componentstruct Index{@Statetons:number=12;// 用水吨数，默认 12@StatebasePrice:number=3;// 基础单价，默认 3@Statesewage:boolean=true;// 是否计算污水处理费}

13.2 数据配置

// 无数组字段：页面围绕用水量、单价和污水开关完成水费估算privateprimaryColor:string='#0284C7'

13.3 交互代码

bill():number{letextra:number=this.tons>10?(this.tons-10)*2:0returnthis.tons*this.basePrice+extra+(this.sewage?this.tons:0)}

13.4 样式代码

Text('核心结果').fontSize(28).fontWeight(FontWeight.Bold).fontColor('#0284C7')

十四、复用价值

14.1 状态复用

• number 用于金额、重量、比例、容量和天数。
• boolean 用于模式开关和费用开关。
• number 索引用于季节、分类和固定选项。

14.2 公式复用

水费阶梯计算 的公式写法可以迁移到更多价格、运动、缴费、购物、家务、绿植和学习工具页面。

14.3 组件复用

结果卡片、参数滑杆、状态标签、单位文案都可以抽成通用组件。

十五、发布级拆解

15.1 场景先行

文章开头先说清楚 水费阶梯计算 解决什么问题，再进入 ArkTS 代码，读者更容易理解公式意义。

15.2 状态为线索

围绕 tons、basePrice、sewage 展开讲解，可以把页面输入、计算和结果串起来。

15.3 公式落地

公式bill = tons * basePrice + max(tons - 10, 0) * 2 + (sewage ? tons : 0)是本项目的核心技术点，应同时解释输入来源、计算过程和输出展示。

十六、总结

Water Bill Meter 用简洁的 ArkTS 页面完成了 生活缴费 场景。它围绕 tons、basePrice、sewage 建模，结合 无数组字段：页面围绕用水量、单价和污水开关完成水费估算 组织输入，并通过bill = tons * basePrice + max(tons - 10, 0) * 2 + (sewage ? tons : 0)把业务规则转换成即时可见的结果。

这类鸿蒙小工具的关键在于：状态清楚、公式透明、反馈及时、边界稳定。理解这个项目后，再开发价格计算、生活缴费、车辆工具、购物清单、年龄换算、租房预算、家务规划、绿植养护或学习目标页面都会更顺手。

相关资源：

• HarmonyOS 开发者官网
• ArkTS 语言指南
• ArkUI 开发框架