Flutter × OpenHarmony 跨端实践：打造个人理财助手的预算管理模块

前言

在个人理财类应用中，预算管理模块往往是用户最频繁使用的核心功能之一。相比单纯的收支记录，预算管理更强调“计划 + 反馈”，帮助用户清晰地掌控各类支出的上限，并通过可视化方式及时感知资金使用情况。

随着 OpenHarmony 在国产操作系统生态中的不断成熟，越来越多开发者开始关注如何利用 Flutter + OpenHarmony 构建高性能、可复用的跨端应用。本文将以“个人理财助手 App”为例，围绕其中的预算管理模块，完整讲解其 UI 结构设计与核心代码实现思路。

背景

传统理财类 App 多以原生方式开发（Android / iOS），但这种模式存在几个明显问题：

1. 多端维护成本高：同一套功能需要维护两份甚至三份代码；
2. 迭代效率低：需求变更需要同步修改多端逻辑；
3. 生态碎片化：在鸿蒙生态中，原生 Android 方案并非最优解。

Flutter 提供了一套统一的 UI 渲染机制，而 OpenHarmony 提供底层系统能力与分布式特性，两者结合可以实现：

• 一套代码，多端运行（Android / 鸿蒙 / Web）；
• UI 层高度一致；
• 逻辑层可复用，便于快速迭代。

预算管理模块正是一个非常适合做“跨端验证”的典型业务场景。

Flutter × OpenHarmony 跨端开发介绍

在 Flutter × OpenHarmony 架构中，整体可分为三层：

1. UI 层（Flutter Widget）

   • 负责页面布局、交互逻辑、状态展示；
   • 本文的预算模块完全位于这一层。

2. 业务逻辑层（Dart Service / ViewModel）

   • 管理预算数据列表 _budgets；
   • 提供计算属性，如：已使用比例、剩余金额等。

3. 系统能力层（OpenHarmony）

   • 提供文件存储、分布式数据、通知服务等；
   • 可通过平台通道（Platform Channel）与 Flutter 通信。

本文聚焦的是 UI + 业务逻辑层的实现，即如何用 Flutter 构建一个完整、可复用的预算管理模块。

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

下面是预算管理模块的核心实现代码，我们从结构上拆分为三个部分：

1. 模块入口 _buildBudgetModule
2. 列表构建 _buildBudgetsList
3. 单个预算卡片 _buildBudgetCard

1. 构建预算管理模块入口

Widget _buildBudgetModule(ThemeData theme) {
  final filteredBudgets = _budgets.where((budget) {
    return _getCategoryName(budget.category)
        .toLowerCase()
        .contains(_searchKeyword.toLowerCase());
  }).toList();

逻辑说明

• _budgets：当前用户所有预算数据；
• _searchKeyword：搜索框输入的关键字；
• 通过 where 实现分类名称的模糊搜索过滤。

这一步体现的是典型的 UI 状态驱动思想：

UI 不直接操作数据源，而是基于“当前状态”生成一个视图模型。

return Column(
  children: [
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text('预算管理', ...),
          TextButton.icon(
            onPressed: () => _addBudget(context),
            icon: const Icon(Icons.add),
            label: const Text('添加预算'),
          ),
        ],
      ),
    ),

设计要点

• 顶部标题 + 操作按钮组合；
• 使用 TextButton.icon，语义清晰，交互友好；
• _addBudget 通常会弹出一个 Dialog 或 BottomSheet。

这是一个典型的 业务模块 Header 设计模式。

2. 构建预算列表

Widget _buildBudgetsList(List<Budget> budgets, ThemeData theme) {
  if (budgets.isEmpty) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.analytics_outlined, size: 80),
          Text('暂无预算设置'),
          Text('点击右上角按钮添加第一条预算'),
        ],
      ),
    );
  }

空状态设计

这是一个非常重要但常被忽略的点：空数据兜底体验。

• 没有预算时，不直接显示空白；
• 给出明确引导文案；
• 增强用户“下一步该做什么”的认知。

return ListView.builder(
  padding: const EdgeInsets.all(16),
  itemCount: budgets.length,
  itemBuilder: (context, index) {
    return _buildBudgetCard(budgets[index], theme);
  },
);

技术要点

• 使用 ListView.builder：

  • 懒加载，性能友好；
  • 适合动态列表场景；

• 每一项委托给 _buildBudgetCard 渲染。

这是一种非常标准的 Flutter 列表拆分模式。

3. 构建预算卡片（核心）

final usagePercentage = budget.usagePercentage;
final isOverBudget = usagePercentage > 100;

这里体现的是 业务模型封装思想：

• usagePercentage、remainingAmount 等计算逻辑
• 全部封装在 Budget 实体中
• UI 只负责展示，不关心公式细节

这是非常符合 MVVM / Clean Architecture 的设计原则。

金额展示区域

Text(
  '¥${budget.spentAmount.toStringAsFixed(2)}/${budget.budgetAmount.toStringAsFixed(2)}',
)

• 明确展示：已花 / 总预算；
• 保留两位小数，适配金融场景；
• 信息密度高但直观。

进度条设计

Stack(
  children: [
    Container(
      height: 12,
      color: theme.colorScheme.surfaceVariant,
    ),
    Container(
      height: 12,
      width: (isOverBudget ? 100.0 : usagePercentage),
      color: isOverBudget
          ? theme.colorScheme.error
          : theme.colorScheme.primary,
    ),
  ],
),

这是一个非常经典的 Flutter 技巧：用 Stack 模拟进度条。

优势：

• 不依赖第三方组件；
• 样式完全可控；
• 可灵活扩展为渐变、动画进度条。

同时通过颜色区分：

• 未超支：主色调；
• 超预算：错误色（红色）。

这属于典型的 金融类应用视觉反馈设计。

详情入口

TextButton.icon(
  onPressed: () => _viewBudgetDetails(context, budget),
  icon: const Icon(Icons.visibility),
  label: const Text('详情'),
)

这里体现的是 模块解耦思想：

• 当前模块只负责“列表展示”；
• 详情逻辑交给另一个页面；
• 通过参数传递 budget 实体。

符合“主列表 + 详情页”的标准业务结构。

心得

在实际开发这个模块时，有几个非常明显的体会：

1. Flutter 非常适合做金融类 UI

   • 自定义组件能力强；
   • 动态布局与动画极其方便；

2. 业务模型设计比 UI 更重要

   • Budget 实体是否封装好计算逻辑，
   • 直接决定了 UI 层是否“干净”。

3. 跨端场景下，UI 复用价值极高

   • 在 Android、鸿蒙、Web 上
   • 预算模块几乎无需改动。

这也是 Flutter × OpenHarmony 最大的工程价值所在。

总结

本文以“个人理财助手 App”为背景，完整拆解了一个预算管理模块在 Flutter × OpenHarmony 跨端架构下的实现方式。从模块入口设计、列表构建，到单个预算卡片的业务建模与可视化反馈，展示了一个典型金融类业务模块的工程实践路径。

从技术角度看，这种模式不仅降低了多端开发成本，还通过清晰的业务模型与组件拆分，大幅提升了代码的可维护性与扩展性。对于希望在鸿蒙生态中构建高质量跨端应用的开发者而言，Flutter × OpenHarmony 无疑是一条非常值得投入的技术路线。