「财务管家」智能记账应用：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 的链式调用风格——每个组件方法返回组件实例本身，允许连续调用属性设置：

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 布局设计原则

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

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

2.3 根容器配置

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

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

---

三、顶部标题栏详解

3.1 结构与语义

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

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 中平铺，原因有三：

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

---

四、功能卡片网格系统

4.1 数据模型定义

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

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 片段抽象为可复用函数：

@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 三层级实现：

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 })
  // ... 后续行类似
}

关键点说明：

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

---

五、Tab 导航与条件渲染

5.1 自定义 Tab Button

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

@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 语句进行条件渲染：

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 引用。它负责：

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

6.2 数据模型与计算属性

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) 方法用于计算逐行累计余额：

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 分隔：

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 背景）：

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 循环）：

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)

技术要点：

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

6.5 合计行

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

---

七、功能导览 Tab 详情

7.1 区域结构

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

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 卡片样式

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

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 版本信息

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

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

---

八、组件间通信与数据流

8.1 父子组件传递

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

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

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

// 父组件传入
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 的键值生成器是关键优化点：

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 阴影系统

// 功能卡片（层级最高）
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。

// ❌ 错误：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() 方法。

// ❌ 错误：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 更新：

// ❌ 错误：直接修改数组元素不会触发重渲染
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 描述，不做计算和副作用：

// ❌ 不推荐：在 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 的第三个参数（键值生成器）对于列表性能至关重要：

// ❌ 不好：使用 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 开发范式的一个典型案例。通过本文的详细拆解，我们可以看到：

1. 声明式 UI 的优雅表达：ArkUI 的链式调用风格让 UI 代码既紧凑又富有表现力，@Builder 和 @Component 的组合完美支撑了组件化开发理念。

2. 纯组件实现复杂布局：不依赖现成的 Table 组件，仅用 Row + Column + ForEach 就能实现功能完整的财务数据表格，充分体现了 ArkUI 基础组件的灵活性和表达能力。

3. 设计系统驱动开发：从色板、字体、圆角到阴影，统一的视觉规范贯穿整个页面，确保新手开发也能产出高水准的设计品质。

4. 性能意识从小处着手：ForEach 键值管理、get 计算属性代替行内计算、条件渲染控制组件生命周期——每一点性能优化都是构建流畅应用的基础。

5. 对 SDK 兼容性的警惕：@Builder 返回 void、Row.space() 不可用等陷阱提醒我们，在探索新技术栈时需要时刻关注 SDK 版本特性。

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

---

---