前言

欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net
在金融类应用开发中，资金管理系统是核心场景之一，兼顾跨平台兼容性、原生性能、数据安全和开发效率是关键。本文将手把手带你完成双端资金管理系统开发：

1. Flutter端：集成主流三方库，实现跨平台（Android/iOS/Windows）资金管理功能，一套代码多端运行；
2. 鸿蒙（HarmonyOS）端：基于ArkTS原生开发，实现鸿蒙设备专属资金管理功能，贴合鸿蒙系统设计规范；
3. 全程提供可直接落地的详细步骤，零基础也能跟着完成项目实践，最终实现账户管理、收支记账、数据统计、资金预算四大核心功能。
   

项目核心技术栈

Flutter端

• 框架：Flutter 3.22+（稳定版）
• 核心三方库：
  • get：路由管理+状态管理，简化页面跳转和数据共享
  • hive：本地轻量级数据库，存储资金数据（无需SQL，性能高效）
  • fl_chart：图表库，实现收支趋势、饼图统计
  • intl：国际化格式化，适配金额、日期、货币格式
  • shared_preferences：轻量级本地存储，保存用户配置
  • flutter_slidable：侧滑删除/编辑组件，优化交互体验
  • cupertino_icons：iOS风格图标，统一跨平台UI

鸿蒙（HarmonyOS）端

• 系统：HarmonyOS NEXT 5.0+
• 开发语言：ArkTS
• 框架：ArkUI（鸿蒙原生UI框架）
• 存储：鸿蒙首选项+关系型数据库
• 图表：鸿蒙原生图表组件

第一部分：Flutter端资金管理系统开发（含三方库全集成）

步骤1：Flutter开发环境搭建

1. 下载安装Flutter SDK（官网：https://flutter.dev/docs/get-started/install）
2. 配置系统环境变量，将Flutter SDK的bin目录添加到PATH
3. 安装Android Studio/Xcode，配置安卓/iOS模拟器
4. 终端执行flutter doctor，检查环境依赖是否完整（修复所有报错）
5. 编辑器推荐：VS Code（安装Flutter、Dart插件）

步骤2：创建Flutter项目并集成三方库

1. 终端创建项目

flutter create flutter_fund_manager
cd flutter_fund_manager

2. 打开pubspec.yaml文件，添加所有依赖（注意缩进格式）

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.6             # 路由+状态管理
  hive: ^2.2.3            # 本地数据库
  hive_flutter: ^1.1.0    # Hive Flutter适配
  fl_chart: ^0.68.0       # 图表统计
  intl: ^0.19.0           # 格式化
  shared_preferences: ^2.2.3 # 轻量存储
  flutter_slidable: ^3.1.0 # 侧滑组件
  cupertino_icons: ^1.0.8 # iOS图标

3. 终端执行命令安装依赖

flutter pub get

4. 安装Hive生成器（开发依赖）

flutter pub add dev:hive_generator dev:build_runner

步骤3：设计数据模型（Hive数据库实体）

资金管理系统核心数据：账户信息、收支记录、预算信息

1. 在lib/models/目录创建3个数据模型
2. 示例：account.dart（账户模型）

import 'package:hive/hive.dart';

// 生成Hive适配器（执行命令自动生成）
part 'account.g.dart';

@HiveType(typeId: 0) // 唯一标识
class AccountModel extends HiveObject {
  @HiveField(0)
  String name; // 账户名称（微信/支付宝/银行卡）

  @HiveField(1)
  double balance; // 账户余额

  @HiveField(2)
  String icon; // 账户图标

  AccountModel({
    required this.name,
    required this.balance,
    required this.icon,
  });
}

3. 同理创建transaction.dart（收支记录）、budget.dart（预算）模型
4. 终端执行命令生成Hive适配器

flutter packages pub run build_runner build

步骤4：初始化本地数据库（Hive+SharedPreferences）

在lib/main.dart中初始化数据库，确保应用启动时加载数据

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'models/account.dart';
import 'models/transaction.dart';
import 'models/budget.dart';
import 'pages/home_page.dart';

void main() async {
  // 确保Flutter绑定初始化
  WidgetsFlutterBinding.ensureInitialized();
  // 初始化Hive
  await Hive.initFlutter();
  // 注册适配器
  Hive.registerAdapter(AccountModelAdapter());
  Hive.registerAdapter(TransactionModelAdapter());
  Hive.registerAdapter(BudgetModelAdapter());
  // 打开数据库盒子
  await Hive.openBox<AccountModel>('accounts');
  await Hive.openBox<TransactionModel>('transactions');
  await Hive.openBox<BudgetModel>('budgets');
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter资金管理系统',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(), // 首页
      debugShowCheckedModeBanner: false,
    );
  }
}

步骤5：核心功能页面开发（基于三方库）

1. 首页（资产总览+快捷操作）

• 展示总资产、各账户余额
• 集成fl_chart实现资产饼图
• 集成flutter_slidable实现账户快捷操作

2. 记账页面（添加收支记录）

• 金额输入、分类选择、账户选择
• 数据自动保存到Hive数据库

3. 统计页面（收支分析）

• 折线图展示月度收支趋势（fl_chart）
• 饼图展示支出分类占比

4. 预算页面（设置月度预算）

• 预算金额设置、剩余预算提醒
• 数据持久化存储

关键代码：统计页面（fl_chart使用示例）

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class StatisticsPage extends StatelessWidget {
  const StatisticsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("收支统计")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            const Text("月度收支趋势"),
            // 折线图组件
            Expanded(
              child: LineChart(
                LineChartData(
                  gridData: const FlGridData(show: true),
                  titlesData: const FlTitlesData(show: true),
                  borderData: FlBorderData(show: true),
                  lineBarsData: [
                    LineChartBarData(
                      spots: [
                        FlSpot(1, 1000),
                        FlSpot(2, 1500),
                        FlSpot(3, 800),
                        FlSpot(4, 2000),
                      ],
                      isCurved: true,
                      color: Colors.blue,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

步骤6：路由管理与状态管理（GetX三方库）

1. 统一管理路由：创建lib/routes/app_routes.dart

import 'package:get/get.dart';
import 'pages/home_page.dart';
import 'pages/add_transaction_page.dart';
import 'pages/statistics_page.dart';
import 'pages/budget_page.dart';

class AppRoutes {
  static const home = '/home';
  static const addTransaction = '/add';
  static const statistics = '/statistics';
  static const budget = '/budget';

  static final routes = [
    GetPage(name: home, page: () => const HomePage()),
    GetPage(name: addTransaction, page: () => const AddTransactionPage()),
    GetPage(name: statistics, page: () => const StatisticsPage()),
    GetPage(name: budget, page: () => const BudgetPage()),
  ];
}

2. 页面跳转：Get.toNamed(AppRoutes.addTransaction)
3. 状态管理：用GetX控制器管理全局资金数据，实现数据实时刷新

步骤7：Flutter端打包运行

1. 安卓打包：flutter build apk（生成安装包）
2. iOS打包：需配合Xcode完成签名打包
3. 运行模拟器：flutter run

第二部分：鸿蒙（HarmonyOS）端资金管理系统原生开发

步骤1：鸿蒙开发环境搭建

1. 下载安装DevEco Studio（鸿蒙官方IDE，官网：https://developer.harmonyos.com/cn/develop/deveco-studio）
2. 安装HarmonyOS SDK（版本选择5.0+）
3. 创建鸿蒙模拟器（Phone/平板设备）
4. 配置项目签名（调试运行必备）

步骤2：创建鸿蒙原生项目

1. 打开DevEco Studio → 新建项目
2. 选择模板：Empty Ability
3. 配置项目：
   • 项目名称：harmony_fund_manager
   • 开发语言：ArkTS
   • 兼容SDK：API 12（HarmonyOS 5.0）
4. 等待项目依赖加载完成

步骤3：鸿蒙数据存储设计

鸿蒙原生采用首选项（轻量存储）+ 关系型数据库存储资金数据：

1. 首选项：存储用户配置、预算信息
2. 关系型数据库：存储账户信息、收支明细
3. 创建数据库工具类：util/DBUtil.ets，实现增删改查

步骤4：鸿蒙核心页面开发（ArkUI）

遵循鸿蒙设计规范，开发4大核心页面，与Flutter端功能对齐：

1. 首页（资产总览）

• 鸿蒙原生组件：Column、Row、Text、Card
• 展示总资产、账户列表、快捷入口

2. 记账页面

• 表单组件：TextInput、Picker、Button
• 数据实时保存到鸿蒙数据库

3. 统计页面

• 鸿蒙原生图表组件：PieChart、LineChart
• 实现收支分类统计、趋势分析

4. 预算页面

• 进度条组件展示预算使用情况
• 预算超标提醒

步骤5：鸿蒙端数据交互与功能调试

1. 实现数据库增删改查工具方法
2. 页面间数据传递：鸿蒙router路由传参
3. 调试：使用DevEco Studio调试器，查看数据存储与UI渲染
4. 适配鸿蒙系统特性：暗黑模式、全面屏、手势操作

步骤6：鸿蒙端打包与安装

1. 点击DevEco Studio右上角运行按钮，安装到模拟器/真机
2. 正式打包：Build → Build Hap(s)/App(s)，生成鸿蒙安装包

第三部分：双端功能联调与项目优化

1. 功能对齐

Flutter端与鸿蒙端保持完全一致的核心功能：

• 账户管理（增删改查）
• 收支记账（收入/支出分类）
• 数据统计（图表可视化）
• 预算管理（月度预算设置）

2. 优化建议

• Flutter端：优化Hive数据库读写速度，减少页面重建
• 鸿蒙端：优化数据库查询效率，适配鸿蒙多设备（手机/平板/折叠屏）
• 数据安全：添加本地数据加密，保护资金隐私

第四部分：项目总结

通过本指南，你已完成：

1. Flutter端：熟练集成get、hive、fl_chart等主流三方库，掌握跨平台资金管理系统开发；
2. 鸿蒙端：掌握ArkTS+ArkUI原生开发，实现鸿蒙设备专属资金管理应用；
3. 完整落地资金管理系统全流程，从环境搭建、项目创建、功能开发到打包上线。

本项目可直接扩展为企业级金融应用，新增登录认证、数据同步、账单导出等高级功能，是学习Flutter三方库实战+鸿蒙原生开发的最佳实践项目。

---

总结

1. 本文以Flutter+三方库+鸿蒙开发为核心，提供资金管理系统从零到一的全流程步骤，可直接照着实践；
2. Flutter端依赖get、hive、fl_chart等三方库实现高效跨平台开发，鸿蒙端基于ArkTS原生开发保证系统适配性；
3. 双端实现账户、记账、统计、预算四大核心功能，覆盖开发环境、项目创建、代码编写、打包上线全环节。