「财务管家」智能记账应用：HarmonyOS NEXT 页面布局设计与实现详解

「财务管家」智能记账应用：HarmonyOS NEXT 页面布局设计与实现详解

摘要：本文以 HarmonyOS NEXT 平台上的「财务管家」智能记账应用为蓝本，深入剖析其页面布局架构、组件化设计思路、ArkTS 语言特性应用以及 ArkUI 声明式 UI 的编程实践。从顶栏标题、功能卡片网格、Tab 导航到收支明细表格组件，逐一拆解每一块 UI 的构造逻辑、样式系统与数据流设计，并分享在 HarmonyOS 生态中开发原生应用的最佳实践与常见陷阱规避。全文约 10,000 字，适合 HarmonyOS 应用开发者与移动端 UI 设计师阅读。

一、项目背景与技术栈

1.1 项目概览

「财务管家」是一款运行于 HarmonyOS NEXT 平台上的轻量级个人记账应用。应用以「月度收支明细管理」为核心场景，为用户提供一套清晰、直观的财务数据可视化工具。整个应用采用单页面 + 组件化 架构------主页面 Index.ets 作为容器，承载 FinancialTable.ets 子组件，通过 Tab 切换在「收支明细」与「功能导览」两个视图之间流转。

1.2 技术栈选型

维度	技术选型	说明
操作系统	HarmonyOS NEXT (SDK 6.1.1.24)	纯国产移动操作系统，API 12+
开发语言	ArkTS	基于 TypeScript 的 HarmonyOS 原生声明式语言
UI 框架	ArkUI	声明式 UI、响应式数据绑定、组件化
构建工具	Hvigor 6.24.2	HarmonyOS 专属构建系统
项目模式	Stage 模型	HarmonyOS 推荐的应用模型
开发环境	DevEco Studio	官方 IDE，内置预览器与调试器

1.3 ArkTS 与 ArkUI 核心概念速览

ArkTS 是 HarmonyOS 的元能力编程语言，它在 TypeScript 语法基础上增加了装饰器（Decorator）系统 和声明式 UI 语法。核心装饰器包括：

@Entry：标记页面入口组件
@Component：标记一个自定义组件
@State：声明响应式状态变量，值变化时自动触发 UI 重渲染
@Builder：声明可复用的 UI 构建函数，类似模板方法
@Prop / @Link：父子组件数据传递

ArkUI 采用类 Web 的链式调用风格------每个组件方法返回组件实例本身，允许连续调用属性设置：

typescript 复制代码

Text('Hello')
  .fontSize(20)
  .fontColor('#333')
  .fontWeight(FontWeight.Bold)

这种风格使 UI 代码紧凑且可读性强，是 ArkUI 区别于传统 XML 布局的显著特征。

二、整体页面架构

2.1 布局层级树

复制代码

Column (根容器, 100% × 100%, 背景 #F0F4F8)
├── Row (顶部标题栏)
│   └── Column
│       ├── Text "💰 财务管家"
│       └── Text "Smart Finance · 智能记账助手"
│
├── Row ("✨ 核心功能" 标题)
│
├── Column (功能卡片网格 2×3)
│   ├── Row (第1行)
│   │   ├── Column → @Builder featureCard(收支明细录入)
│   │   └── Column → @Builder featureCard(财务统计概览)
│   ├── Row (第2行)
│   │   ├── Column → @Builder featureCard(数据可视化)
│   │   └── Column → @Builder featureCard(明细查询检索)
│   └── Row (第3行)
│       ├── Column → @Builder featureCard(本地持久化)
│       └── Column → @Builder featureCard(跨端适配)
│
├── Row (Tab 切换栏)
│   ├── @Builder tabButton("📊 收支明细", 0)
│   └── @Builder tabButton("📈 功能导览", 1)
│
└── if (currentTab === 0)
    └── FinancialTable()           ← 子组件
    else
    └── Scroll                     ← 功能导览详情
        └── Column
            ├── 功能一详情卡片
            ├── 功能二详情卡片
            ├── 功能三详情卡片
            ├── 功能四详情卡片
            └── 版本信息文本

2.2 布局设计原则

整个页面遵循以下设计原则：

自顶向下的信息层级：标题 → 功能概览 → 详细内容，符合用户的注意力递减规律
卡片化视觉语言 ：所有内容块均以圆角白卡片呈现，通过 shadow 属性制造微浮层效果，形成清晰的视觉边界
一致的颜色系统 ：主色 #1A237E（深蓝）、辅助色 #F0F4F8（背景灰）、功能色集中于卡片内部
响应式权重分配 ：使用 layoutWeight(1) 实现弹性布局，自适应不同屏幕尺寸

2.3 根容器配置

typescript 复制代码

Column()
  .width('100%')
  .height('100%')
  .backgroundColor('#F0F4F8')

根容器采用全屏 Column 纵向布局，背景色选用极浅的灰蓝色 #F0F4F8，相比纯白更柔和，长时间使用不易视觉疲劳。

三、顶部标题栏详解

3.1 结构与语义

顶部标题栏位于页面最上方，承担品牌识别与页面定位功能：

typescript 复制代码

Row() {
  Column() {
    Text('💰 财务管家')
      .fontSize(26)
      .fontWeight(FontWeight.Bold)
      .fontColor('#1A237E')
    Text('Smart Finance · 智能记账助手')
      .fontSize(12)
      .fontColor('#78909C')
      .margin({ top: 2 })
  }
  .alignItems(HorizontalAlign.Start)
  .layoutWeight(1)
}
.width('100%')
.padding({ top: 20, bottom: 8, left: 20, right: 20 })

3.2 设计细节

双行标题结构 ：主标题使用 26 号字、加粗、深蓝色 #1A237E，次级标题 12 号字、灰色 #78909C，形成强烈的层级对比
左侧对齐 + Emoji 图标 ：💰 Emoji 作为标题前缀，比传统图标更轻量，且不需要额外资源文件
安全边距 ：padding 使用 20px 左右边距，符合移动端内容安全区规范
弹性填充 ：layoutWeight(1) 确保标题列占据剩余宽度，为未来添加右侧操作按钮预留空间

3.3 为什么选择 Column 嵌套而非直接 Text

标题栏使用 Column 嵌套两个 Text，而非直接在 Row 中平铺，原因有三：

对齐便利 ：两个 Text 共享同一个 HorizontalAlign.Start 对齐策略
扩展性强 ：未来如需在标题旁加入头像、通知角标等元素，只需在 Row 中增加 Column 平级节点
布局隔离 ：子标题的 margin({ top: 2 }) 相对主标题定位，不受其他外部元素影响

四、功能卡片网格系统

4.1 数据模型定义

功能点使用 interface FeaturePoint 结构化定义：

typescript 复制代码

interface FeaturePoint {
  icon: string;    // Emoji 图标
  title: string;   // 功能名称
  desc: string;    // 功能简述
  color: string;   // 主题色（当前用于标识，后续可扩展为卡片边框色）
}

这种将 UI 元数据与渲染逻辑分离的做法，让新增或修改功能点只需操作数据数组，无需动模板代码。

4.2 六项核心功能

图标	功能名称	简述	主题色
📋	收支明细录入	逐笔记录收入与支出，支持日期、类别、金额等完整字段	`#FF6B35`
📊	财务统计概览	总收入、总支出、结余一目了然，实时计算汇总数据	`#004E89`
📈	数据可视化	收入与支出分色展示，余额动态累计，趋势清晰可辨	`#1A936F`
🔍	明细查询检索	按日期排序浏览每笔交易，支持通配符模糊搜索	`#7B2CBF`
💾	本地持久化	数据自动存储至本地数据库，离线可查、安全可靠	`#D62828`
📱	跨端适配	手机、平板多设备适配，横竖屏布局自适应	`#219EBC`

4.3 @Builder 自定义构建函数

@Builder 是 ArkUI 中最具特色的装饰器之一，它允许开发者将一段 UI 片段抽象为可复用函数：

typescript 复制代码

@Builder
featureCard(item: FeaturePoint) {
  Column() {
    Text(item.icon)
      .fontSize(32)
      .margin({ bottom: 8 })
    Text(item.title)
      .fontSize(15)
      .fontWeight(FontWeight.Bold)
      .fontColor('#1A1A2E')
      .textAlign(TextAlign.Center)
    Text(item.desc)
      .fontSize(11)
      .fontColor('#666680')
      .textAlign(TextAlign.Center)
      .lineHeight(16)
      .margin({ top: 6 })
  }
  .width('100%')
  .padding(14)
  .backgroundColor('#FFFFFF')
  .borderRadius(14)
  .shadow({ radius: 6, color: '#1A000000', offsetX: 0, offsetY: 3 })
  .alignItems(HorizontalAlign.Center)
}

@Builder 的关键特性：

带参数声明，支持按引用传递对象
内部可以访问所属组件的 @State 变量
返回值类型为 void （而非 Component），因此不能链式调用布局属性
调用语法：this.featureCard(item)

4.4 网格布局的实现技巧

2 列网格通过嵌套 Column → Row → Column 三层级实现：

typescript 复制代码

Column() {
  Row() {
    Column() { this.featureCard(this.featureList[0]) }
      .layoutWeight(1)
    Column() { this.featureCard(this.featureList[1]) }
      .layoutWeight(1)
      .margin({ left: 8 })
  }
  .width('100%')
  .padding({ left: 14, right: 14 })
  // ... 后续行类似
}

关键点说明：

@Builder 返回 void 的处理 ：由于 @Builder 返回 void，不能直接在 builder 调用后接 .layoutWeight(1)。解决方案是在 builder 外层包裹一个 Column() 容器，在容器上设置布局属性。这是一个重要的 ArkTS 语法陷阱。
卡片间距 ：行内卡片间距通过第二个 Column 的 .margin({ left: 8 }) 实现。这是对 SDK 不支持 Row.space() 的兼容方案。
行间距 ：行间距离通过 Row().margin({ top: 10 }) 控制。
等宽分配 ：两个 Column 各占 layoutWeight(1)，平均分配行宽。

五、Tab 导航与条件渲染

5.1 自定义 Tab Button

Tab 按钮使用 @Builder 构建，通过参数 index 与组件状态 currentTab 比较决定样式：

typescript 复制代码

@Builder
tabButton(label: string, index: number) {
  Text(label)
    .fontSize(14)
    .fontWeight(this.currentTab === index ? FontWeight.Bold : FontWeight.Regular)
    .fontColor(this.currentTab === index ? '#FFFFFF' : '#666680')
    .padding({ top: 8, bottom: 8, left: 18, right: 18 })
    .backgroundColor(this.currentTab === index ? '#1A237E' : '#F0F0F5')
    .borderRadius(20)
    .onClick(() => {
      this.currentTab = index;
    })
}

设计要点：

胶囊样式 ：borderRadius(20) 创造圆角胶囊效果，激活态使用深蓝填充 + 白色文字，非激活态使用浅灰背景 + 灰色文字
点击即切换 ：onClick 回调直接修改 @State currentTab，触发 UI 重渲染
无动画过渡 ：当前为即时切换，如需平滑过渡可引入 transition 动画属性

5.2 if/else 条件渲染

ArkUI 支持在 build() 方法中使用 if/else 语句进行条件渲染：

typescript 复制代码

if (this.currentTab === 0) {
  FinancialTable()       // Tab 0: 收支明细表
} else {
  Scroll() { ... }       // Tab 1: 功能导览详情
}

条件渲染的机制 ：当 currentTab 变化时，ArkUI 框架会自动销毁旧分支的组件树并创建新分支的组件树。这意味着：

Tab 0 切换到 Tab 1 时，FinancialTable 会被完全卸载------其内部状态（比如未来可能添加的编辑状态）不会保留
Tab 1 切换到 Tab 0 时，FinancialTable 会重新初始化，transactions 数组由 @State 初始值提供

如果需要保持 Tab 0 的状态不被销毁，可以将 if/else 改为使用 Visibility 属性控制显隐。

六、FinancialTable 收支明细表组件

6.1 组件职责

FinancialTable 是一个独立封装的 @Component 子组件，通过 export 关键字导出供 Index.ets 引用。它负责：

维护 12 条模拟交易数据（7 月份完整月）
计算总收入、总支出、结余及每笔交易的动态余额
渲染统计概览卡片 + 可滚动表格

6.2 数据模型与计算属性

typescript 复制代码

interface Transaction {
  date: string;      // 日期，如 '2026-07-01'
  category: string;   // 类别，如 '工资收入'
  income: number;     // 收入金额
  expense: number;    // 支出金额
}

组件使用三个 get 计算属性：

属性	计算逻辑	用途
`totalIncome`	`transactions.reduce((sum, item) => sum + item.income, 0)`	总收入汇总
`totalExpense`	`transactions.reduce((sum, item) => sum + item.expense, 0)`	总支出汇总
`finalBalance`	`this.totalIncome - this.totalExpense`	最终结余

getRunningBalance(index) 方法用于计算逐行累计余额：

typescript 复制代码

getRunningBalance(index: number): number {
  let balance = 0;
  for (let i = 0; i <= index; i++) {
    balance += this.transactions[i].income - this.transactions[i].expense;
  }
  return balance;
}

6.3 统计概览卡片

统计卡片以 Row 水平排列三个指标区块，中间以垂直 Divider 分隔：

typescript 复制代码

Row() {
  Column() { /* 📈 总收入 */ }
    .layoutWeight(1)
    .alignItems(HorizontalAlign.Center)

  Divider()
    .vertical(true)
    .height(40)
    .color('#E0E0E0')

  Column() { /* 📉 总支出 */ }
    .layoutWeight(1)
    .alignItems(HorizontalAlign.Center)

  Divider()
    .vertical(true)
    .height(40)
    .color('#E0E0E0')

  Column() { /* 💰 结余 */ }
    .layoutWeight(1)
    .alignItems(HorizontalAlign.Center)
}
.width('100%')
.padding(16)
.backgroundColor('#FFFFFF')
.borderRadius(12)
.shadow({ radius: 4, color: '#1A000000', offsetX: 0, offsetY: 2 })

配色系统：

指标	正常色	负值色
总收入	`#E8432F`（暖红）	---
总支出	`#2E7D32`（翠绿）	---
结余	`#1565C0`（深蓝）	`#E8432F`（暖红，表示透支）

选择红色代表收入、绿色代表支出，颠覆了传统"红字亏损、绿字盈利"的认知------这是有意为之，因为收入是"进账"（暖色调），支出是"流出"（冷绿色调），更符合日常收支的心理感知。

6.4 表格布局的纯组件实现

在不依赖 Table 组件的情况下，使用 Row + Column + ForEach 纯手工构建表格：

表头行（#E3F2FD 背景）：

typescript 复制代码

Row() {
  Text('日期').width(this.colWidths[0])
  Text('类别').width(this.colWidths[1])
  Text('收入').width(this.colWidths[2]).fontColor('#C62828')
  Text('支出').width(this.colWidths[3]).fontColor('#2E7D32')
  Text('余额').width(this.colWidths[4]).fontColor('#0D47A1')
}
.backgroundColor('#E3F2FD')
.borderWidth({ bottom: 2 })
.borderColor('#64B5F6')

数据行（ForEach 循环）：

typescript 复制代码

ForEach(this.transactions, (item: Transaction, index?: number | undefined) => {
  Row() {
    Text(item.date)
    Text(item.category)
    Text(this.formatMoney(item.income))
    Text(this.formatMoney(item.expense))
    Text(this.formatMoney(this.getRunningBalance(index ?? 0)))
  }
  .backgroundColor(index !== undefined && index % 2 === 0 ? '#FFFFFF' : '#F5F9FF')
}, (item: Transaction) => item.date + item.category)

技术要点：

斑马纹 ：通过 index % 2 === 0 判断奇偶行，交替使用白色 #FFFFFF 和浅蓝 #F5F9FF 背景，提升长列表的可读性
列宽控制 ：使用 colWidths 字符串数组 ['18%', '22%', '20%', '20%', '20%'] 按百分比分配宽度，日期列较窄、类别列较宽
零值显示 ：formatMoney 方法将零值显示为短横线 -，避免 ¥0.00 的冗余信息
键值生成 ：ForEach 的第三个参数是键值生成器 (item) => item.date + item.category，帮助 ArkUI 框架高效识别和复用列表项

6.5 合计行

合计行以暖黄色 #FFF8E1 背景突出显示，使用 2px 粗边框 #FFB74D 强化视觉边界。合计行的 layoutWeight 比例调整为 40% + 20% + 20% + 20%，将"合计"标签合并日期与类别两列。

七、功能导览 Tab 详情

7.1 区域结构

功能导览视图位于 Tab 1，使用可滚动的 Scroll 包裹 Column，内部垂直排列四个功能详情卡片：

typescript 复制代码

Scroll() {
  Column() {
    // 功能一：收支明细管理
    Column() { ... }
    // 功能二：统计概览卡片
    Column() { ... }
    // 功能三：数据可视化
    Column() { ... }
    // 功能四：离线可用
    Column() { ... }
    // 版本信息
    Text('v1.0.0 · HarmonyOS NEXT')
  }
  .width('100%')
  .padding({ left: 16, right: 16, top: 4, bottom: 20 })
}
.layoutWeight(1)
.width('100%')

7.2 卡片样式

每个功能详情卡片与首页功能卡片风格统一：

typescript 复制代码

Column() {
  Text('📌 功能一：收支明细管理')
    .fontSize(15)
    .fontWeight(FontWeight.Bold)
    .fontColor('#1A237E')
  Text('逐条记录每一笔收入与支出，包含日期、类别、金额等完整信息。...')
    .fontSize(12)
    .fontColor('#555')
    .lineHeight(18)
    .margin({ top: 6 })
}
.width('100%')
.padding(14)
.backgroundColor('#FFFFFF')
.borderRadius(12)
.shadow({ radius: 3, color: '#1A000000', offsetX: 0, offsetY: 2 })

每个卡片使用不同的主题色作为标题颜色：

卡片	标题色	色值
收支明细管理	深蓝	`#1A237E`
统计概览卡片	亮蓝	`#004E89`
数据可视化	翠绿	`#1A936F`
离线可用	紫色	`#7B2CBF`

7.3 版本信息

typescript 复制代码

Text('v1.0.0 · HarmonyOS NEXT')
  .fontSize(11)
  .fontColor('#999')
  .margin({ top: 20, bottom: 30 })

版本信息置于功能导览列表底部，使用最小字号和最淡的灰色，不抢夺正文注意力，同时清晰标识应用版本和平台。

八、组件间通信与数据流

8.1 父子组件传递

当前 Index 与 FinancialTable 之间采用无参数引用方式：

typescript 复制代码

// Index.ets
import { FinancialTable } from '../components/FinancialTable';
// ...
FinancialTable()

FinancialTable 内部维护自身的 @State transactions 数据，不依赖父组件注入数据。这种模式适合自包含组件的场景。未来如需将数据从父组件传入，可通过构造参数实现：

typescript 复制代码

// 父组件传入
FinancialTable({ transactions: $data })

// 子组件接收
@Component
export struct FinancialTable {
  @Prop transactions: Transaction[] = []
}

8.2 响应式更新链

用户交互 → 状态变化 → UI 重渲染的完整链路：

复制代码

@State currentTab 变化
       ↓
build() 重新执行
       ↓
if/else 条件评估
       ↓
TAB 0 → ForEach 重新渲染 FinancialTable
TAB 1 → Scroll 重新渲染功能导览
       ↓
ArkUI 框架计算 DOM 差异
       ↓
增量更新实际视图

8.3 避免不必要的重渲染

ForEach 的键值生成器是关键优化点：

typescript 复制代码

ForEach(
  this.transactions,
  (item, index) => { /* UI 渲染 */ },
  (item: Transaction) => item.date + item.category  // 键值生成器
)

当 transactions 数组内容变化时，ArkUI 通过键值比较仅更新变化的行，而非重新渲染整个列表。键值的唯一性和稳定性直接影响性能表现。

九、样式系统与视觉规范

9.1 色板

用途	色值	应用场景
页面背景	`#F0F4F8`	根容器、内容区背景
主色	`#1A237E`	标题、表头文字、激活 Tab
卡片背景	`#FFFFFF`	所有卡片容器
主文字色	`#333333` / `#1A1A1A`	正文、合计文字
辅助文字色	`#78909C` / `#90A4AE`	副标题、指标标签
收入色	`#E8432F` / `#D32F2F`	收入值、总收入指标
支出色	`#2E7D32` / `#388E3C`	支出值、总支出指标
余额色	`#1565C0` / `#0D47A1`	余额值、表头余额
分隔线	`#E0E0E0` / `#E8E8E8`	分割线、行边框
表头背景	`#E3F2FD`	表格头行
合计行背景	`#FFF8E1`	表格合计行
斑马纹	`#F5F9FF`	偶数行背景

9.2 字体系统

层级	字号	字重	色值	场景
页面标题	26	Bold	`#1A237E`	品牌标题
功能名称	15	Bold	`#1A1A2E`	卡片标题
功能描述	11	Regular	`#666680`	卡片副文本
Tab 文字	14	Bold/Regular	白/灰	切换按钮
指标数值	18	Bold	各自色值	统计卡片
表头文字	14	Bold	`#1A237E`	表格列名
数据文字	13	Medium/Regular	各自色值	表格数据
副标题	12	Regular	`#78909C`	辅助信息
版本文本	11	Regular	`#999`	版本信息

9.3 圆角系统

圆角值	应用
14px	功能卡片
12px	统计卡片、功能详情卡片
8px	表格容器
20px	Tab 胶囊按钮

采用统一的圆角体系使页面呈现一致的设计语言，不同圆角值表达不同的容器层级（函数卡片 > 统计卡片 > 表格容器）。

9.4 阴影系统

typescript 复制代码

// 功能卡片（层级最高）
shadow({ radius: 6, color: '#1A000000', offsetX: 0, offsetY: 3 })

// 统计卡片（层级中等）
shadow({ radius: 4, color: '#1A000000', offsetX: 0, offsetY: 2 })

// 功能详情卡片（层级较低）
shadow({ radius: 3, color: '#1A000000', offsetX: 0, offsetY: 2 })

通过调整 shadow 的 radius 和 offsetY 参数，在不使用分层背景色的前提下，让不同层级的元素在 Z 轴上形成视觉层次差异。

十、ArkTS 开发陷阱与最佳实践

10.1 @Builder 返回值类型

陷阱：@Builder 函数返回 void 而非 Component。

typescript 复制代码

// ❌ 错误：Property 'layoutWeight' does not exist on type 'void'
this.featureCard(item).layoutWeight(1)

// ✅ 正确：在外层容器上设置布局属性
Column() { this.featureCard(item) }.layoutWeight(1)

原理：@Builder 是 UI 构建函数，不是组件工厂方法。它执行时将 UI 片段直接注册到父容器上，因此无法链式调用布局属性。

10.2 Row.space() 兼容性

陷阱：某些 SDK 版本不支持 Row().space() 方法。

typescript 复制代码

// ❌ 错误：Property 'space' does not exist on type 'RowAttribute'
Row() { Text('A') Text('B') }.space(10)

// ✅ 正确：使用子元素 margin 模拟间距
Row() {
  Text('A')
  Text('B').margin({ left: 10 })
}

最佳实践 ：在开发时优先使用 margin 控制子元素间距，避免依赖容器层面的 space 属性，以获得更广的 SDK 兼容性。

10.3 @State 的不可变更新

@State 装饰的变量需要整体替换才能触发 UI 更新：

typescript 复制代码

// ❌ 错误：直接修改数组元素不会触发重渲染
this.transactions[0].income = 20000;

// ✅ 正确：创建新数组替换旧数组
const newList = [...this.transactions];
newList[0] = { ...newList[0], income: 20000 };
this.transactions = newList;

这是因为 ArkUI 的响应式系统通过引用比较（而非深比较）检测 @State 变量的变化。

10.4 避免在 build() 中使用复杂逻辑

build() 方法应保持纯粹------只做 UI 描述，不做计算和副作用：

typescript 复制代码

// ❌ 不推荐：在 build() 中做计算
build() {
  Column() {
    Text(`${this.transactions.reduce((s, i) => s + i.income, 0).toFixed(2)}`)
  }
}

// ✅ 推荐：使用 get 计算属性
get totalIncome(): number {
  return this.transactions.reduce((sum, item) => sum + item.income, 0);
}
build() {
  Column() {
    Text(`¥${this.totalIncome.toFixed(2)}`)
  }
}

计算属性具有惰性求值 和缓存特性，性能优于每次 build 执行时的重复计算。

10.5 ForEach 键值管理

ForEach 的第三个参数（键值生成器）对于列表性能至关重要：

typescript 复制代码

// ❌ 不好：使用 index 作为键
ForEach(items, (item, i) => { ... }, (_, i) => i)

// ✅ 好：使用数据唯一标识
ForEach(items, (item, i) => { ... }, (item) => item.id)

// ✅ 本项目：使用日期+类别组合作为复合键
ForEach(items, (item, i) => { ... }, (item) => item.date + item.category)

稳定的键值帮助 ArkUI 在列表数据变化时最小化 DOM 操作。

十一、未来可扩展方向

11.1 功能增强

数据持久化 ：接入 @ohos.data.preferences 或 @ohos.data.relationalStore，将模拟数据替换为真实本地存储
图表可视化 ：引入 Canvas 组件绘制折线图或饼图，丰富数据展示维度
分类管理：添加自定义收支类别管理页面，支持增删改分类标签
搜索与筛选：实现按日期范围、类别、金额区间的数据筛选功能

11.2 体验优化

动画过渡 ：在 Tab 切换、卡片加载时应用 transition 动画，提升交互流畅度
暗黑模式 ：通过 @Styles 定义暗色主题变量，响应系统深色模式切换
手势交互：支持左滑删除记录、下拉刷新等手势操作
多语言支持 ：将硬编码中文文本抽取到 string.json 资源文件，实现国际化

11.3 架构演进

状态管理 ：引入 @Provide / @Consume 或全局状态管理，解决跨组件数据共享问题
路由模块化 ：将单页面扩展为多页面应用，使用 router.pushUrl 实现页面导航
单元测试 ：基于 @ohos.hamock 框架编写组件的自动化测试用例

十二、总结

「财务管家」应用是 HarmonyOS NEXT 平台上 ArkTS + ArkUI 开发范式的一个典型案例。通过本文的详细拆解，我们可以看到：

声明式 UI 的优雅表达 ：ArkUI 的链式调用风格让 UI 代码既紧凑又富有表现力，@Builder 和 @Component 的组合完美支撑了组件化开发理念。
纯组件实现复杂布局 ：不依赖现成的 Table 组件，仅用 Row + Column + ForEach 就能实现功能完整的财务数据表格，充分体现了 ArkUI 基础组件的灵活性和表达能力。
设计系统驱动开发：从色板、字体、圆角到阴影，统一的视觉规范贯穿整个页面，确保新手开发也能产出高水准的设计品质。
性能意识从小处着手 ：ForEach 键值管理、get 计算属性代替行内计算、条件渲染控制组件生命周期------每一点性能优化都是构建流畅应用的基础。
对 SDK 兼容性的警惕 ：@Builder 返回 void、Row.space() 不可用等陷阱提醒我们，在探索新技术栈时需要时刻关注 SDK 版本特性。

通过这一实战案例，希望能为 HarmonyOS 开发者提供一份从设计到代码的完整参考，助力国产操作系统生态的繁荣发展。