当前位置：首页 > news >正文

鸿蒙 ArkTS 实战：Green Recipe Book 从绿色食谱本到低碳生活记录完整解析

news 2026/7/20 13:35:54

鸿蒙 ArkTS 实战：Green Recipe Book 从绿色食谱本到低碳生活记录完整解析

前言

Green Recipe Book 是一个围绕低碳食材、菜谱步骤、购物清单、营养提示和收藏数量构建的鸿蒙 ArkTS 单页应用。它的价值不在复杂页面数量，而在把日常低碳行为转化成可输入、可计算、可反馈、可持续追踪的数据。

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

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

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

一、项目定位与业务目标

1.1 应用场景

用户记录季节性低碳食材和菜谱步骤，保存后自动生成购物清单，并更新营养建议和收藏数量。

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

1.2 核心目标

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

二、源码入口与页面结构

2.1 入口组件

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

@Entry@Componentstruct Index{build(){Scroll(){Column({space:16}){Text('Green Recipe Book')}}}}

2.2 页面分层

页面可以拆成五个区域：

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

三、核心数据模型

3.1 模型抽象

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

typeGreenRecipe={ingredient:string;recipe:string;shopping:string;nutrition:string;saved:number;};

3.2 模型价值

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

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

四、状态字段设计

4.1 状态代码

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

@Stateingredient:string='Seasonal tofu and greens';@Staterecipe:string='Steam greens, pan sear tofu, add sesame sauce.';@Stateshopping:string='Tofu, greens, sesame';@Statesaved:number=6;

4.2 状态职责

状态	类型	职责
`ingredient`	页面状态	支撑绿色食谱本的输入、统计或反馈
`recipe`	页面状态	支撑绿色食谱本的输入、统计或反馈
`shopping`	页面状态	支撑绿色食谱本的输入、统计或反馈
`nutrition`	页面状态	支撑绿色食谱本的输入、统计或反馈
`saved`	页面状态	支撑绿色食谱本的输入、统计或反馈

这些状态字段覆盖了绿色食谱本的主要交互。输入框更新字符串状态，按钮调用函数修改数值和提示，界面再自动刷新。

五、默认数据与首屏体验

5.1 默认内容

默认项	初始值	含义
Seasonal tofu and greens	6 recipes	默认食材和收藏数
Tofu, greens, sesame	shopping	默认购物清单

5.2 默认数据的作用

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

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

六、核心计算逻辑

6.1 计算代码

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

saveRecipe():void{this.saved++;this.shopping=this.ingredient+', basic seasoning';this.nutrition='Low carbon meal saved. Add beans or nuts for protein balance.';}

6.2 计算含义

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

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

七、主操作函数拆解

7.1 操作代码

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

Button('Make Shopping List').width('100%').backgroundColor('#0F766E').onClick(()=>this.shopping=this.ingredient+', reusable bag')

7.2 操作流程

填写低碳食材
记录菜谱步骤
保存食谱
生成购物清单和营养提示

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

八、输入组件设计

8.1 TextInput 的角色

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

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

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

Text('Saved recipes '+value).fontSize(24).fontWeight(FontWeight.Bold)

10.2 指标设计原则

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

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

十一、布局与视觉层次

11.1 Scroll + Column

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

Scroll(){Column({space:16}){Text('Green Recipe Book')// input// metrics// actions// feedback}.padding(20).width('100%')}

11.2 背景色语义

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

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

十二、运行验证流程

12.1 手工验证步骤

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

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

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

12.2 验证重点

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

十三、异常处理与边界值

13.1 数值转换

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

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

13.2 边界处理

需要重点关注：

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

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

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

14.1 业务扩展

后续可以加入季节食材库、碳排估算、家庭菜单、营养标签和购物清单导出。

14.2 工程扩展

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

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