鸿蒙 ArkTS 实战：Kitchen Compost Log 从厨余堆肥记录到低碳生活记录完整解析

g_z_x__

19人浏览 · 2026-07-19 21:13:33

g_z_x__ · 2026-07-19 21:13:33 发布

鸿蒙 ArkTS 实战：Kitchen Compost Log 从厨余堆肥记录到低碳生活记录完整解析

前言

Kitchen Compost Log 是一个围绕 厨余添加、堆肥周期、翻堆次数、照片备注和养护提醒 构建的鸿蒙 ArkTS 单页应用。它的价值不在复杂页面数量，而在把日常低碳行为转化成可输入、可计算、可反馈、可持续追踪的数据。

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

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

在这里插入图片描述

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

一、项目定位与业务目标

1.1 应用场景

用户记录厨余投放内容、周期天数和翻堆次数，还可以保存成品照片备注，用于家庭堆肥过程管理。

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

1.2 核心目标

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

二、源码入口与页面结构

2.1 入口组件

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

@Entry
@Component
struct Index {
  build() {
    Scroll() {
      Column({ space: 16 }) {
        Text('Kitchen Compost Log')
      }
    }
  }
}

2.2 页面分层

页面可以拆成五个区域：

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

三、核心数据模型

3.1 模型抽象

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

type CompostCycle = {
  kitchenWaste: string;
  cycleDay: number;
  turns: number;
  photoNote: string;
};

3.2 模型价值

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

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

四、状态字段设计

4.1 状态代码

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

@State kitchenWaste: string = 'Fruit peels 0.8 kg';
@State cycleDay: number = 9;
@State turns: number = 2;
@State photoNote: string = 'No result photo yet.';

4.2 状态职责

状态	类型	职责
`kitchenWaste`	页面状态	支撑厨余堆肥记录的输入、统计或反馈
`cycleDay`	页面状态	支撑厨余堆肥记录的输入、统计或反馈
`turns`	页面状态	支撑厨余堆肥记录的输入、统计或反馈
`photoNote`	页面状态	支撑厨余堆肥记录的输入、统计或反馈
`reminder`	页面状态	支撑厨余堆肥记录的输入、统计或反馈

这些状态字段覆盖了 厨余堆肥记录 的主要交互。输入框更新字符串状态，按钮调用函数修改数值和提示，界面再自动刷新。

五、默认数据与首屏体验

5.1 默认内容

默认项	初始值	含义
Fruit peels 0.8 kg	day 9	默认厨余记录
turns	2	已翻堆次数

5.2 默认数据的作用

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

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

六、核心计算逻辑

6.1 计算代码

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

addWaste(): void {
  this.cycleDay++;
  this.reminder = 'Waste added: ' + this.kitchenWaste + '. Keep moisture balanced.';
}

6.2 计算含义

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

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

七、主操作函数拆解

7.1 操作代码

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

turnPile(): void {
  this.turns++;
  this.reminder = 'Pile turned. Next turn after 3 days.';
}

7.2 操作流程

记录厨余重量
增加堆肥周期
执行翻堆
保存结果照片备注

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

八、输入组件设计

8.1 TextInput 的角色

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

TextInput({ text: this.kitchenWaste, placeholder: 'Input value' })
  .onChange((value: string) => this.kitchenWaste = 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 指标文案

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

Text('Cycle day ' + value)
  .fontSize(24)
  .fontWeight(FontWeight.Bold)

10.2 指标设计原则

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

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

十一、布局与视觉层次

11.1 Scroll + Column

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

Scroll() {
  Column({ space: 16 }) {
    Text('Kitchen Compost Log')
    // input
    // metrics
    // actions
    // feedback
  }
  .padding(20)
  .width('100%')
}

11.2 背景色语义

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

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

十二、运行验证流程

12.1 手工验证步骤

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

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

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

12.2 验证重点

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

十三、异常处理与边界值

13.1 数值转换

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

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

13.2 边界处理

需要重点关注：

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

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

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

14.1 业务扩展

后续可以加入湿度温度记录、翻堆提醒、照片相册、成熟度判断和堆肥知识卡。

14.2 工程扩展

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

interface EcoAction {
  title: string;
  value: number;
  unit: string;
  note: string;
  createdAt: number;
}

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