基于 Flutter × OpenHarmony 的个人理财助手开发实战 —— 支出记录模块设计与实现

前言

随着移动端应用从“单平台开发”向“多终端统一体验”演进，跨端开发已经成为主流技术路线之一。Flutter 作为 Google 推出的高性能跨平台 UI 框架，而 OpenHarmony 则是国产操作系统领域的重要生态，两者结合可以在手机、平板乃至 IoT 设备上实现统一的业务逻辑与交互体验。

本文将以一个 个人理财助手 App 为例，重点讲解其中的 支出记录模块 的设计与实现过程，采用底部导航栏风格，完整覆盖 UI 构建逻辑与核心组件实现思路。

背景

在实际生活中，大多数人都会面临这样的问题：

• 支出记录分散在多个 App 中
• 无法直观看到每天、每月的消费结构
• 想要一个“简单、干净、不臃肿”的记账工具

因此我设计了一个轻量级的 个人理财助手 App，核心目标是：

用最少的交互步骤，完成一次完整的支出记录。

其中，“支出记录模块”是整个系统中使用频率最高、交互最密集的功能模块，承担了：

• 支出列表展示
• 关键字搜索过滤
• 新增支出入口
• 单条支出卡片化展示

Flutter × OpenHarmony 跨端开发介绍

架构组合方式

在 OpenHarmony 中集成 Flutter，整体架构如下：

OpenHarmony 系统层
    ↓
Flutter Engine (OHOS 适配)
    ↓
Dart 业务逻辑层
    ↓
UI Widget 渲染

优势非常明显：

对于个人工具类应用（记账、待办、笔记等），这种组合非常适合。

开发核心代码（详细解析）

本模块的核心目标是：
构建一个支持搜索、列表展示、卡片化呈现的支出记录模块。

整体结构拆分为三层：

1. 模块入口 _buildExpensesModule
2. 列表构建 _buildExpensesList
3. 单条卡片 _buildExpenseCard

一、支出模块入口：_buildExpensesModule

Widget _buildExpensesModule(ThemeData theme) {
  final filteredExpenses = _expenses.where((expense) {
    return expense.description.toLowerCase().contains(_searchKeyword.toLowerCase()) ||
           expense.paymentMethod.toLowerCase().contains(_searchKeyword.toLowerCase()) ||
           _getCategoryName(expense.category).toLowerCase().contains(_searchKeyword.toLowerCase());
  }).toList();

1. 搜索过滤逻辑

这里实现了一个非常实用的 本地搜索机制：

• 支持按：

  • 描述
  • 支付方式
  • 分类名称

• 使用 where + contains 实现实时过滤

• 不依赖后端，性能极高

属于典型的：

纯前端状态驱动搜索方案

return Column(
  children: [
    Row(
      children: [
        Text('支出记录'),
        TextButton.icon(
          onPressed: () => _addExpense(context),
          icon: const Icon(Icons.add),
          label: const Text('添加支出'),
        ),
      ],
    ),

2. 顶部区域设计思想

顶部区域承担两个核心职责：

• 标题语义提示（支出记录）
• 主操作入口（添加支出）

这符合标准的 F-Pattern 信息结构设计原则：

左侧信息展示，右侧操作入口。

二、支出列表构建：_buildExpensesList

if (expenses.isEmpty) {
  return Center(
    child: Column(
      children: [
        Icon(Icons.payment_outlined),
        Text('暂无支出记录'),
        Text('点击右上角按钮添加第一条支出记录'),
      ],
    ),
  );
}

空状态设计（Empty State）

这是很多人容易忽略的细节，但非常重要：

• 用户首次进入 App
• 没有任何数据时
• 如果是空白页，体验极差

这里采用：

• 图标 + 文案 + 操作提示
• 明确引导用户下一步行为

属于典型的 新手引导型空状态设计。

return ListView.builder(
  itemCount: expenses.length,
  itemBuilder: (context, index) {
    return _buildExpenseCard(expenses[index], theme);
  },
);

ListView.builder 的优势：

• 懒加载
• 高性能
• 适合长列表场景

是 Flutter 列表渲染的标准做法。

三、单条支出卡片：_buildExpenseCard

这是整个模块中最核心的 UI 组件。

1. 卡片结构设计

Card(
  elevation: 2,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),

使用 Card + 圆角 + 阴影：

• 明确区分记录边界
• 提升信息层级感
• 符合 Material Design 规范

2. 左侧分类图标区

Container(
  width: 40,
  height: 40,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
  ),
  child: Icon(_getCategoryIcon(expense.category)),
)

作用：

• 用视觉图标表达“支出类型”
• 比文字更快形成用户认知
• 极大提升扫描效率

这是典型的：

图形优先信息识别设计

3. 金额展示策略

Text(
  '-¥${expense.amount.toStringAsFixed(2)}',
  style: theme.textTheme.titleMedium?.copyWith(
    color: theme.colorScheme.error,
  ),
)

关键点：

• 红色表示“支出”
• 强调负号
• 保留两位小数

符合金融类 App 的 数字表达规范。

4. 业务标签设计（重复支出）

if (expense.isRecurring)
  Chip(
    label: const Text('重复'),
  ),

这是一个非常典型的 业务语义标签设计：

• 不干扰主信息
• 又能强化业务属性
• 为后期统计分析提供入口

例如：

• 房租
• 会员订阅
• 水电费

都属于“重复支出”。

心得

在这个模块的开发过程中，有几个非常典型的经验：

1. Flutter 非常适合“工具类产品”

尤其是：

• 列表型应用
• 表单型应用
• 数据驱动 UI

Flutter 的状态管理 + Widget 架构非常自然。

2. OpenHarmony 更像“系统级底座”

Flutter 负责：

• UI
• 交互
• 动画

OpenHarmony 负责：

• 多设备适配
• 权限管理
• 系统能力调用

两者分工非常清晰。

3. 卡片化设计极其重要

对于信息密集型应用：

卡片 = 信息单元
列表 = 信息流

只要卡片设计合理，整个 App 的体验就成功了一半。

总结

本文通过一个真实的 个人理财助手 App 场景，完整拆解了基于 Flutter × OpenHarmony 的支出记录模块设计与实现过程。从搜索过滤、列表渲染到卡片化 UI 构建，整个模块完全采用前端状态驱动，结构清晰、扩展性强、跨端一致性高。

这类架构非常适合：

• 记账类 App
• 工具类 App
• 数据展示型应用

如果你正在做 OpenHarmony + Flutter 实战项目，这个支出模块几乎可以直接作为一个通用模板复用到任何业务系统中。