鸿蒙 ArkTS 实战：Energy Device Compare 从节能设备对比到绿色生活工具完整解析

g_z_x__

4人浏览 · 2026-07-19 21:30:08

g_z_x__ · 2026-07-19 21:30:08 发布

鸿蒙 ArkTS 实战：Energy Device Compare 从节能设备对比到绿色生活工具完整解析

前言

Energy Device Compare 是一个围绕 设备功率、使用时长、月度节省、对比建议和能耗计算 的鸿蒙 ArkTS 单页应用。它把绿色生活里的一个具体行为做成可输入、可记录、可反馈的页面，让用户能在日常场景里快速完成一次环保行动记录。

本文基于项目 Index.ets 源码展开，重点分析状态字段、输入组件、按钮动作、指标展示和反馈文案。文章内容可以直接发布，不依赖额外说明。

绿色生活工具的关键不在功能多，而在动作短。用户输入一次、点击一次、看到一个明确反馈，就已经形成了很好的产品闭环。

在这里插入图片描述

配图可用于文章首屏。实际发布时可以替换为真机截图，重点展示输入区域、指标区域、按钮动作和状态反馈。

一、项目定位与使用场景

1.1 应用定位

用户输入两台设备的功率和每日使用时长，页面计算替换为节能设备后每月可能节省的费用。

这个项目适合作为低碳生活、环保习惯、社区协作或家庭记录工具的功能原型。它没有复杂路由，主逻辑集中在一个页面中，便于阅读、调试和继续扩展。

1.2 目标拆解

目标	说明	页面体现
快速记录	用户能在一个页面完成输入	`TextInput`
行为反馈	点击后立即更新状态	`Button`
指标可见	用数字表达累计结果	`Monthly saving`
建议明确	文案给出下一步动作	状态文本

二、源码入口与页面骨架

2.1 入口结构

项目使用标准 ArkTS 页面组件。

@Entry
@Component
struct Index {
  build() {
    Scroll() {
      Column({ space: 16 }) {
        Text('Energy Device Compare')
      }
    }
  }
}

2.2 页面层次

页面主要由四块构成：

输入区：填写行为对象、地点、规则或数值。
指标区：展示 Monthly saving。
动作区：触发保存、记录、分析或提醒。
反馈区：显示状态、建议、安全提示或下一步信息。

三、状态模型抽象

3.1 模型定义

从源码状态可以抽象出 DeviceCompareState。

type DeviceCompareState = {
  title: string;
  value: string | number;
  note: string;
  updated: boolean;
};

3.2 实际状态代码

项目中真实使用的状态如下。

@State deviceA: string = 'Old fridge';
@State wattA: string = '160';
@State deviceB: string = 'Energy star fridge';
@State wattB: string = '90';
@State hours: string = '8';

3.3 状态职责表

状态	类型	职责
`deviceA`	状态字段	支撑节能设备对比的输入、统计或反馈
`wattA`	状态字段	支撑节能设备对比的输入、统计或反馈
`deviceB`	状态字段	支撑节能设备对比的输入、统计或反馈
`wattB`	状态字段	支撑节能设备对比的输入、统计或反馈
`hours`	状态字段	支撑节能设备对比的输入、统计或反馈
`advice`	状态字段	支撑节能设备对比的输入、统计或反馈

这些状态都直接参与 UI 渲染。只要用户输入或点击按钮，状态变化就会反馈到页面。

四、默认数据与首屏理解

4.1 默认内容

默认项	初始值	含义
Old fridge	160 watts	设备 A
Energy star fridge	90 watts	设备 B

4.2 默认值的意义

默认值让用户打开页面后无需猜测功能。比如 Energy Device Compare 会直接给出一个可编辑的初始对象和一个可观察的指标，用户点击主按钮就能看到状态变化。

默认文本说明输入格式。
默认数字支撑指标展示。
默认提示引导用户完成下一步。

五、核心动作函数

5.1 主要动作代码

项目的核心行为由按钮触发，下面是主要逻辑。

costDiff(): number {
  let diff = (Number(this.wattA) - Number(this.wattB)) * Number(this.hours) * 30 / 1000 * 0.6;
  return Math.round(diff * 10) / 10;
}

5.2 动作流程

输入设备 A 和功率
输入设备 B 和功率
填写每日使用时长
计算月度节省

这条流程短而明确，适合移动端工具。用户不需要跨页面，也不需要复杂配置。

六、辅助逻辑与扩展动作

6.1 辅助代码

源码中还包含辅助动作、提示更新或二级按钮。

compare(): void {
  this.advice = this.deviceB + ' may save about ' + this.costDiff() + ' per month.';
}

6.2 多动作设计

动作类型	作用	用户收益
保存	记录地点、品牌、对象或计划	便于复用
记录	增加次数、时长、积分或照片	形成累计
提醒	设置下一次行动提示	促进习惯
反馈	给出安全、评分或建议	降低误用

七、输入组件设计

7.1 TextInput 绑定

输入框直接绑定 @State 字段。

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

7.2 数字输入处理

涉及数量、功率、天数或次数时，代码会把字符串转成数字。

let value = Number(inputText);
if (Number.isNaN(value)) {
  // show message or ignore invalid input
}

这类处理虽然简单，但决定了工具是否可靠。

八、指标展示策略

8.1 核心指标

当前页面的关键指标是 Monthly saving。

Text('Monthly saving ' + value)
  .fontSize(24)
  .fontWeight(FontWeight.Bold)

8.2 指标作用

指标作用	表达方式	产品价值
记录成果	次数、照片、积分、节省量	让行动可见
表达进度	排名、连续天数、评分	建立激励
引导改善	安全提示、建议、提醒	促进下一步

九、按钮交互设计

9.1 Button 的职责

按钮不只是触发点击，它承载了页面最重要的业务意图。

Button('Main Action')
  .width('100%')
  .onClick(() => {
    // update state
  })

9.2 交互反馈

点击按钮后至少要更新一个可见状态：数字、提醒、说明、照片数量、积分或评分。否则用户无法判断操作是否生效。

在环保工具里，反馈文案要尽量具体。例如“已保存回收点”比“成功”更有价值。

十、布局与视觉设计

10.1 Scroll 容器

页面使用 Scroll 包裹内容，可以适应输入项和按钮数量增长。

Scroll() {
  Column({ space: 16 }) {
    Text('Energy Device Compare')
    // inputs
    // metric
    // actions
    // feedback
  }.padding(20).width('100%')
}

10.2 颜色语义

颜色方向	适合场景	作用
绿色	回收、分类、植物、低碳行动	强化环保感
蓝色	数据分析、设备对比、提醒	表达理性与稳定
黄色	早餐、生活打卡、温和提示	表达日常习惯
棕色	旧书、电池、堆肥等物品流转	表达生活材料感

十一、状态反馈文案

11.1 文案类型

项目里的文案承担用户引导职责。

文案类型	例子	功能
记录成功	投递、签到、保存完成	确认动作
安全提醒	电池处理、分类规则	防止误操作
习惯建议	明天继续、设置提醒	促进坚持
结果说明	节省、评分、积分	展示价值

11.2 文案更新

文案通常通过状态字段更新。

this.status = 'Action recorded.';
this.reminder = 'Next reminder updated.';

十二、运行验证流程

12.1 手工验证

可以按下面流程验证页面：

打开页面，确认标题为 Energy Device Compare。
检查默认输入值和指标是否存在。
修改输入框内容。
点击主要按钮。
观察指标和反馈文案是否变化。

// 验证路径示例
const before = 'default state';
const action = 'tap primary button';
const after = 'visible state updated';
console.info(before + ' -> ' + action + ' -> ' + after);

12.2 验证重点

验证点	预期
输入同步	文本状态随输入变化
按钮触发	对应函数执行
数值变化	指标即时更新
文案变化	用户知道发生了什么
连续点击	累计逻辑不异常

十三、边界情况处理

13.1 数值边界

如果项目涉及功率、页数、次数、成本、碳排或天数，需要考虑空值、负数和非数字输入。

const num = Number(text);
if (!Number.isFinite(num) || num < 0) {
  // show friendly feedback
}

13.2 业务边界

需要重点关注：

未填写地点时是否还能保存。
连续点击是否造成异常累计。
评分是否超过最大值。
成本或积分是否出现负数。
提醒文案是否与当前输入一致。

十四、扩展为完整工具

14.1 业务扩展

后续可以加入电价配置、设备类别、回本周期、能效等级和家庭设备清单。

14.2 工程扩展

可以抽象统一绿色行动记录。

interface GreenAction {
  name: string;
  metric: number;
  unit: string;
  note: string;
  time: number;
}

function createGreenAction(name: string, metric: number, unit: string, note: string): GreenAction {
  return {
    name,
    metric,
    unit,
    note,
    time: Date.now()
  };
}