鸿蒙 ArkTS 实战：Renovation Budget Table 从账目记录到状态反馈完整解析

前言

Renovation Budget Table 是一个面向轻量财务管理的鸿蒙 ArkTS 示例应用，中文场景可以理解为“装修预算表”。装修预算表把项目预算、付款节点、材料清单和超支提醒整理为一个可持续更新的预算台账。

装修支出金额大、周期长，预算节点和材料备注决定了后续对账效率。 这个项目用 ArkTS 接口建模、@State 状态驱动、ArkUI 组件布局、金额统计 和 标记状态 搭出完整的单页账本体验。

在这里插入图片描述

页面示意图对应 Renovation Budget Table 的核心信息架构：顶部展示金额与状态比例，中部呈现业务模块，底部完成新增和列表确认。

财务类工具不一定复杂，但必须让金额、备注和状态保持一致。否则记录越多，用户越难相信账本。

一、项目定位与业务目标

1.1 场景拆解

装修预算表 的基础对象是一条账目记录，用户需要同时看到名称、金额、备注和标记状态。
源码默认记录包含 Kitchen cabinet 和 Floor material，金额分别是 8600 与 5200。
amount 字段在这里表示装修预算使用额，单位可以理解为元。

业务元素 项目表达 用户收益
账目名称 title 快速识别装修预算表条目
金额指标 amount 汇总装修预算使用额
备注说明 note 保存分类、凭证、提醒或上下文
状态字段 flagged 表示标记状态

1.2 核心用户路径

  1. 打开页面查看顶部金额统计。
  2. 通过四个功能标签理解账本覆盖范围。
  3. 填写标题、金额和备注。
  4. 点击 Add item 新增记录。
  5. 通过复选框调用 toggleFlag 更新状态。

1.3 账本价值

在 Renovation Budget Table 中，账本价值服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

二、源码结构总览

2.1 页面文件位置

在 Renovation Budget Table 中，页面文件位置服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

2.2 代码层次

在 Renovation Budget Table 中，代码层次服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

2.3 职责边界

在 Renovation Budget Table 中，职责边界服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

三、数据模型设计

3.1 接口字段

在 Renovation Budget Table 中，接口字段服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

3.2 字段语义表

字段 类型 当前含义 页面位置
title string 装修预算表账目名称 列表主标题
amount number 装修预算使用额 统计区和行尾金额
note string 备注说明 列表副文本
flagged boolean 标记状态 复选框和背景色

3.3 模型特点

在 Renovation Budget Table 中，模型特点服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

四、状态管理解析

4.1 状态变量清单

在 Renovation Budget Table 中，状态变量清单服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

4.2 状态刷新机制

在 Renovation Budget Table 中，状态刷新机制服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

4.3 业务状态关系

在 Renovation Budget Table 中，业务状态关系服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

账本页面的可靠感来自一致反馈：金额变了，统计要变；状态变了，颜色和数量也要变。

五、金额统计逻辑

5.1 总额计算

在 Renovation Budget Table 中，总额计算服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

5.2 状态数量统计

在 Renovation Budget Table 中，状态数量统计服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

5.3 方法对比

方法 输入 输出 作用
totalAmount() items 金额总和 汇总装修预算使用额
flaggedCount() items 已标记数量 驱动状态比例
toggleFlag(index) 列表索引 无 切换单条记录状态

六、新增记录流程

6.1 输入校验

在 Renovation Budget Table 中，输入校验服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

6.2 默认备注

在 Renovation Budget Table 中，默认备注服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

6.3 插入顺序

在 Renovation Budget Table 中，插入顺序服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

七、页面布局拆解

7.1 滚动容器

在 Renovation Budget Table 中，滚动容器服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

7.2 顶部统计区

在 Renovation Budget Table 中，顶部统计区服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

7.3 功能标签区

在 Renovation Budget Table 中，功能标签区服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

八、列表渲染与状态反馈

8.1 ForEach 渲染

在 Renovation Budget Table 中，ForEach 渲染服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

8.2 复选框状态

在 Renovation Budget Table 中，复选框状态服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

8.3 视觉反馈

在 Renovation Budget Table 中，视觉反馈服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

账本页面的可靠感来自一致反馈：金额变了，统计要变；状态变了，颜色和数量也要变。

九、ArkUI 组件使用

9.1 核心组件表

组件 用途 项目位置
Scroll 页面滚动 最外层容器
Column 垂直布局 页面主体、表单和卡片
Row 横向布局 顶部统计、开关行、列表行
TextInput 输入 标题、金额、备注
Toggle 开关和复选框 提醒开关、状态确认
Button 提交 新增记录入口

9.2 输入组件

在 Renovation Budget Table 中，输入组件服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

9.3 按钮组件

在 Renovation Budget Table 中，按钮组件服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

十、账本扩展方向

10.1 本地持久化

在 Renovation Budget Table 中，本地持久化服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

10.2 提醒能力

在 Renovation Budget Table 中，提醒能力服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

10.3 数据导出

在 Renovation Budget Table 中，数据导出服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

十一、调试与验证

11.1 输入验证

在 Renovation Budget Table 中，输入验证服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

11.2 交互验证

在 Renovation Budget Table 中，交互验证服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

11.3 布局验证

在 Renovation Budget Table 中，布局验证服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

账本页面的可靠感来自一致反馈：金额变了，统计要变；状态变了，颜色和数量也要变。

十二、性能与可维护性

12.1 性能特征

在 Renovation Budget Table 中，性能特征服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

12.2 可维护性

在 Renovation Budget Table 中，可维护性服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

12.3 代码风格

在 Renovation Budget Table 中，代码风格服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

十三、完整代码片段串联

13.1 接口定义

interface LedgerItem {
  title: string;
  amount: number;
  note: string;
  flagged: boolean;
}

LedgerItem 是 Renovation Budget Table 的账目数据契约，所有展示和计算都围绕它展开。

13.2 状态初始化

@State items: LedgerItem[] = [
  { title: 'Kitchen cabinet', amount: 8600, note: 'Payment node 2', flagged: false },
  { title: 'Floor material', amount: 5200, note: 'Overspend alert on', flagged: false }
];
@State titleText: string = '';
@State amountText: string = '';
@State noteText: string = '';
@State alertOn: boolean = true;
@State status: string = 'Ledger ready';

默认数据让页面打开后立即具备业务语境，也方便验证统计结果。

13.3 统计方法

private totalAmount(): number {
  let total = 0;
  this.items.forEach((item: LedgerItem) => {
    total += item.amount;
  });
  return total;
}

private flaggedCount(): number {
  let count = 0;
  this.items.forEach((item: LedgerItem) => {
    if (item.flagged) {
      count++;
    }
  });
  return count;
}

统计方法只读取数组并返回结果，不直接修改状态，适合在 UI 中反复调用。

13.4 新增方法

private addItem(): void {
  const amount = Number(this.amountText);
  if (this.titleText.trim().length === 0 || !Number.isFinite(amount)) {
    this.status = 'Enter title and valid amount';
    return;
  }
  this.items = [{ title: this.titleText, amount: Math.round(amount), note: this.noteText.length > 0 ? this.noteText : 'No note yet', flagged: false }, ...this.items];
  this.titleText = '';
  this.amountText = '';
  this.noteText = '';
  this.status = 'Ledger item added';
}

新增方法完成金额转换、输入校验、数组插入、输入清空和状态提示。

13.5 切换方法

private toggleFlag(index: number): void {
  this.items[index].flagged = !this.items[index].flagged;
  this.items = [...this.items];
}

切换方法修改单条记录后重新展开数组，确保 ArkUI 能稳定刷新列表。

13.6 顶部 UI

Row({ space: 10 }) {
  Column({ space: 4 }) {
    Text('Budget used').fontSize(13).fontColor('#475569')
    Text(String(this.totalAmount())).fontSize(24).fontWeight(FontWeight.Bold).fontColor('#B45309')
  }.layoutWeight(1).padding(14).backgroundColor('#FEF3C7').borderRadius(8)
  Column({ space: 4 }) {
    Text('Flagged').fontSize(13).fontColor('#475569')
    Text(this.flaggedCount() + '/' + this.items.length).fontSize(24).fontWeight(FontWeight.Bold).fontColor('#047857')
  }.layoutWeight(1).padding(14).backgroundColor('#D1FAE5').borderRadius(8)
}.width('100%')

顶部 UI 把金额和状态比例放在第一屏，让用户先看关键指标。

13.7 输入 UI

Column({ space: 10 }) {
  TextInput({ placeholder: 'Title', text: this.titleText })
    .onChange((value: string) => this.titleText = value)
  TextInput({ placeholder: 'Amount', text: this.amountText })
    .type(InputType.Number)
    .onChange((value: string) => this.amountText = value)
  TextInput({ placeholder: 'Note', text: this.noteText })
    .onChange((value: string) => this.noteText = value)
  Button('Add item')
    .height(42)
    .width('100%')
    .onClick(() => this.addItem())
}.padding(14).backgroundColor('#F1F5F9').borderRadius(8)

输入区保持三个字段，减少记录成本，同时保留足够的上下文。

13.8 列表 UI

ForEach(this.items, (item: LedgerItem, index: number) => {
  Row() {
    Toggle({ type: ToggleType.Checkbox, isOn: item.flagged })
      .onChange(() => this.toggleFlag(index))
    Column({ space: 6 }) {
      Text(item.title).fontSize(18).fontWeight(FontWeight.Bold).fontColor('#111827')
      Text(item.note).fontSize(14).fontColor('#475569')
    }.layoutWeight(1).margin({ left: 8 })
    Text(String(item.amount)).fontSize(18).fontWeight(FontWeight.Bold).fontColor('#B45309')
  }.padding(14).backgroundColor(item.flagged ? '#DCFCE7' : '#FFFFFF').borderRadius(8).width('100%')
})

列表 UI 是主要操作区，既展示账目信息，也承载状态切换。

十四、业务扩展补充

14.1 分类筛选

在 Renovation Budget Table 中，分类筛选服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

14.2 月份归档

在 Renovation Budget Table 中，月份归档服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

14.3 金额排序

在 Renovation Budget Table 中，金额排序服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

14.4 状态筛选

在 Renovation Budget Table 中，状态筛选服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

14.5 趋势分析

在 Renovation Budget Table 中，趋势分析服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

14.6 共享账本

在 Renovation Budget Table 中，共享账本服务于装修预算表这个具体场景，目标是让金额记录和标记状态同步可见。
页面通过 items 管理账目数组，通过 totalAmount() 汇总装修预算使用额，通过 flaggedCount() 统计已标记记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表金额和行背景同步刷新。

  • 业务对象：装修预算表
  • 核心指标：装修预算使用额
  • 关键方法：totalAmount()、flaggedCount()、addItem()、toggleFlag()

十五、总结

15.1 技术收束

Renovation Budget Table 用单页 ArkTS 代码完成了围绕装修预算表的轻量账本应用。
项目通过 LedgerItem 建模，用 items 管理数组，再通过 totalAmount()、flaggedCount()、addItem() 和 toggleFlag() 形成完整交互闭环。
这种实现适合学习鸿蒙 ArkUI 的声明式开发，也适合作为后续接入本地存储、提醒和导出能力的原型基础。

15.2 实践价值

Renovation Budget Table 用单页 ArkTS 代码完成了围绕装修预算表的轻量账本应用。
项目通过 LedgerItem 建模，用 items 管理数组，再通过 totalAmount()、flaggedCount()、addItem() 和 toggleFlag() 形成完整交互闭环。
这种实现适合学习鸿蒙 ArkUI 的声明式开发，也适合作为后续接入本地存储、提醒和导出能力的原型基础。

15.3 最终结论

Renovation Budget Table 用单页 ArkTS 代码完成了围绕装修预算表的轻量账本应用。
项目通过 LedgerItem 建模，用 items 管理数组，再通过 totalAmount()、flaggedCount()、addItem() 和 toggleFlag() 形成完整交互闭环。
这种实现适合学习鸿蒙 ArkUI 的声明式开发，也适合作为后续接入本地存储、提醒和导出能力的原型基础。

{
  "name": "Renovation Budget Table",
  "scene": "装修预算表",
  "metric": "装修预算使用额",
  "statusField": "flagged"
}

hvigorw assembleHap

- 账目名称：Kitchen cabinet
- 金额指标：8600元
- 备注说明：Payment node 2

相关资源：

# harmonyos # 华为
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

莘莘学子，学习鸿蒙，致力自主系统开发

avatar HarmonyOS开发者社区
cover

鸿蒙三方库 | harmony-utils之NetworkUtil默认网络与绑定网络详解

avatar HarmonyOS开发者社区
cover

鸿蒙三方库 | harmony-utils之NetworkUtil网络状态订阅详解

avatar HarmonyOS开发者社区