鸿蒙 ArkTS 实战Home Energy Meter 从家庭用电估算到家庭能耗应用完整解析前言家庭用电估算 是一个偏工具属性的鸿蒙 ArkTS 单页应用。它围绕“通过功率、使用小时和电价三个参数估算耗电度数与费用适合空调、烘干机、电暖器等设备。”这个具体需求把数值状态、滑杆输入、公式计算和即时反馈组合在同一个页面中。本文基于 Home Energy Meter 的真实源码展开重点分析它如何用State、Slider、Button、ForEach、条件样式和计算方法完成一个可用的小工具页面。工具类应用最怕结果不透明。输入变化后计算结果应该立刻出现在用户眼前。图示说明本文按照输入区、计算区、结果区和操作区拆解页面帮助读者把 ArkTS 声明式 UI 与实际业务公式联系起来。一、项目背景与目标1.1 业务场景通过功率、使用小时和电价三个参数估算耗电度数与费用适合空调、烘干机、电暖器等设备。这个场景的关键不是页面跳转而是输入参数变化后结果同步变化。因此状态字段的设计和公式表达比复杂导航更重要。1.2 用户路径打开页面查看默认参数。通过滑杆、按钮或列表调整输入。页面立即刷新计算结果或状态文案。用户根据结果完成记录、估算、确认或对比。1.3 技术目标目标页面体现技术实现参数输入滑杆、按钮、列表Slider / Button / ForEach状态保存当前数值和选择State公式计算金额、进度、总量、时长方法或表达式结果反馈数字、文案、颜色Text / 条件样式二、页面入口与工程结构2.1 入口组件项目主要逻辑集中在 Index 页面中用Entry标记入口用Component声明组件。EntryComponentstruct Index{build(){Column(){Text(家庭用电估算)}}}2.2 单页工具的特点家庭用电估算 没有复杂路由页面围绕 watt、hours、priceCents 展开。这种结构非常适合讲清楚一个工具型页面的计算闭环。2.3 页面区域拆分区域作用常见组件标题区展示工具名称与当前摘要Row、Column、Text输入区调整数值、时段或选项Slider、Button、ForEach结果区显示计算结果Text、Stack、Circle说明区补充规则和业务解释Text三、状态建模3.1 状态字段表字段类型含义wattnumber设备功率默认 1200Whoursnumber使用时长默认 3 小时priceCentsnumber电价默认 58 分/度这些字段都直接影响页面结果。例如数字字段会参与公式计算布尔字段会控制确认状态字符串字段会展示当前阶段或侧别。3.2 状态声明代码EntryComponentstruct Index{Statewatt:number1200;// 设备功率默认 1200WStatehours:number3;// 使用时长默认 3 小时StatepriceCents:number58;// 电价默认 58 分/度}3.3 状态设计原则家庭用电估算 的状态设计遵循一个清晰原则会变的用户输入放入 State不变的业务配置放入普通字段或数组。对工具类页面而言状态字段越清楚计算公式越容易验证。四、数据配置与业务选项4.1 静态数据无数组字段页面以功率、时间、电价三个参数驱动能耗估算如果页面存在列表、时段或项目选项就使用数组集中管理如果页面主要是滑杆参数就直接围绕数值状态构建。4.2 ForEach 渲染模式ForEach(this.items,(item:string,index:number){Text(item).fontSize(16).fontWeight(FontWeight.Bold).onClick((){this.selectedindex})})4.3 索引与详情绑定Text(this.items[this.selected]).backgroundColor(this.selectedindex?#1F2937:#FFFFFF)这种方式适合固定选项场景既能减少重复代码也能让选中态与详情区保持一致。五、输入控件设计5.1 Slider 的使用这批工具类页面大量使用 Slider因为它适合调节金额、人数、时长、容量、比例等连续或阶梯数值。Slider({value:this.value,min:1,max:100,step:1}).onChange((value:number){this.valueMath.round(value)})5.2 Button 的使用Button 适合离散操作例如增加一次、重置、确认、推进下一阶段。Button(增加).backgroundColor(#1F2937).onClick((){this.count1})5.3 输入控件比较控件适用数据项目价值Slider范围内数值快速调节参数Button离散动作增减、确认、重置ForEach固定选项渲染列表或时段Toggle二值状态在线、开关、确认六、核心交互行为6.1 主要动作功率 Slider 调整 watt时长 Slider 调整 hours电价 Slider 调整 priceCentskwh 与 cost 方法实时计算6.2 源码关键片段kwh():number{returnMath.round(this.watt*this.hours/10)/100}cost():number{returnMath.round(this.kwh()*this.priceCents)/100}6.3 交互闭环功率 Slider 调整 watt时长 Slider 调整 hours电价 Slider 调整 priceCentskwh 与 cost 方法实时计算这些动作的共同点是用户一操作状态立刻变化状态一变化计算结果或展示文案立刻刷新。七、计算公式解析7.1 核心公式kwhwatt*hours/1000;costkwh*priceCents/1007.2 公式放在哪里当公式较短时可以直接写在 Text 表达式里当公式有多步计算时更适合封装为方法。privateresult():number{returnMath.round(this.value*100)/100}7.3 结果显示Text(结果String(this.result())).fontSize(32).fontWeight(FontWeight.Bold).fontColor(#1F2937)公式结果一定要放在视觉重点区域让用户看得见输入变化带来的影响。八、ArkTS 组件细节8.1 Text 数字展示数字结果通常需要更大字号和更强对比度。Text(String(total)).fontSize(44).fontWeight(FontWeight.Bold)8.2 Stack 结果区域Stack 可以把圆形背景、数字和单位叠在一起形成工具仪表盘效果。Stack(){Circle().width(190).height(190).fill(#F8FAFC)Text(结果)}8.3 条件文案条件文案可以把冷冰冰的数字转换成用户能理解的提示。Text(this.done?目标已完成:继续记录)8.4 条件颜色.fontColor(this.warning?#DC2626:#1F2937)颜色要服务于状态变化比如完成、风险、推荐、已预约等。九、页面布局策略9.1 左右结构部分工具采用左侧摘要、右侧参数的结构适合同时展示结果和输入控件。Row(){Column(){Text(结果)}.width(36%)Column(){Text(参数)}.layoutWeight(1)}9.2 上下结构上下结构适合先展示标题和结果再展示滑杆与按钮。Column(){Header()ResultPanel()ControlPanel()}9.3 信息密度控制信息展示位置原因核心结果居中或顶部最先被看到输入参数中下部方便调整辅助说明底部不干扰操作十、调试与验证10.1 验证路径调整每个 Slider确认状态值变化。点击按钮确认边界判断生效。检查公式结果是否随状态刷新。检查条件文案和颜色是否符合当前状态。10.2 日志辅助Button(调试).onClick((){console.info(value changed)})10.3 常见问题问题可能原因处理方式Slider 后数字不变onChange 未写回 State检查赋值语句结果为小数过长未做 Math.round增加格式化按钮越界缺少 if 判断限制最小或最大值选项错位index 与数组不一致检查数据顺序十一、可扩展能力11.1 本地保存家庭用电估算 可以把当前参数保存到本地下次打开页面时恢复上一次记录。interfaceSavedToolState{values:number[]updatedAt:string}11.2 历史记录工具类应用很适合增加历史记录例如每天喝水量、每次喂养记录、每次估算方案或每次会议预约。11.3 导出与分享对于估算和排期类工具可以把结果导出为文本或截图便于发送给他人确认。{tool:家庭用电估算,fields:watt、hours、priceCents,result:calculated}十二、体验优化12.1 参数范围Slider 的 min、max、step 要贴近真实业务范围太大或步长太细都会降低操作效率。12.2 数值格式金额、毫升、秒、小时、人数、度数都要带单位避免用户误解。12.3 反馈即时性工具页面不要等提交后才显示结果输入变化时就应该实时反馈。十三、完整实现片段13.1 状态骨架EntryComponentstruct Index{Statewatt:number1200;// 设备功率默认 1200WStatehours:number3;// 使用时长默认 3 小时StatepriceCents:number58;// 电价默认 58 分/度}13.2 业务配置// 无数组字段页面以功率、时间、电价三个参数驱动能耗估算privateprimaryColor:string#1F293713.3 交互片段kwh():number{returnMath.round(this.watt*this.hours/10)/100}cost():number{returnMath.round(this.kwh()*this.priceCents)/100}13.4 结果渲染Text(计算结果).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#1F2937)十四、同类工具复用14.1 复用状态模式number 字段用于金额、时间、容量、次数和索引。boolean 字段用于确认或开关。string 字段用于阶段、方向或分类。方法用于封装较复杂的计算公式。14.2 复用交互模式家庭用电估算 的写法可以迁移到预算工具、计时工具、排期工具、健康记录和家庭计算器中。14.3 复用视觉模式结果区使用大数字输入区使用 Slider操作区使用主题色按钮这是工具类应用很稳妥的组合。十五、学习价值15.1 对初学者这个项目适合练习 State、Slider、Button、Text 表达式和计算方法。15.2 对业务开发者它展示了如何把真实生活中的小计算、小记录、小排期转换成可交互页面。15.3 对工程扩展后续可以加入本地缓存、历史列表、数据导出和多设备同步让 家庭用电估算 从单页工具扩展成完整应用。总结Home Energy Meter 通过清晰的状态字段和计算逻辑完成了 家庭能耗 场景。页面围绕 watt、hours、priceCents 管理输入状态围绕 无数组字段页面以功率、时间、电价三个参数驱动能耗估算 组织业务选项再通过公式kwh watt * hours / 1000; cost kwh * priceCents / 100给出即时结果。从这个项目可以看到鸿蒙 ArkTS 非常适合构建轻量工具状态清楚、输入直接、公式透明、结果即时。把这四点做好一个小工具页面就能既好用又容易维护。相关链接HarmonyOS 应用开发指南ArkTS 快速入门ArkUI 声明式开发