Flutter 框架跨平台鸿蒙开发 - 电子发票智能管理

见山是山-见水是水2026-04-13 11:08

电子发票智能管理应用

欢迎加入开源鸿蒙跨平台社区：

https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

电子发票智能管理是一款效率工具应用，专为财务人员和职场人士打造。应用支持自动扫描识别电子发票，智能分类归档管理，一键生成报销清单，还能导出Excel报表，让繁琐的发票管理工作变得轻松高效。

应用以清新的绿色为主色调，象征财务管理的规范与高效。涵盖发票管理、报销清单、统计分析、关于信息四大模块。用户可以扫描发票、选择发票、创建报销单、导出报表，全流程管理电子发票。

1.2 核心功能

功能模块 功能描述 实现方式
发票扫描 自动识别发票信息 模拟OCR
智能分类 8种费用类别自动归类 枚举定义
状态管理 5种发票状态追踪 状态枚举
报销清单 多发票组合报销 列表模型
Excel导出 一键导出报表 文件生成
统计分析 费用分布可视化 图表展示

1.3 发票类型定义

序号 类型名称 Emoji 描述
1 增值税发票 📄 增值税普通/专用发票
2 电子发票 📱 电子普通发票
3 火车票 🚄 铁路客票
4 机票 ✈️ 航空运输电子客票
5 出租车票 🚕 出租车发票
6 住宿发票 🏨 酒店住宿发票
7 餐饮发票 🍽️ 餐饮服务发票
8 其他发票 📋 其他类型发票

1.4 发票状态定义

序号 状态名称 Emoji 颜色 描述
1 待处理 ⏳ #FF9800 新扫描待处理
2 已验证 ✅ #4CAF50 发票验证通过
3 已报销 💰 #2196F3 已完成报销
4 已拒绝 ❌ #F44336 报销被拒绝
5 已归档 📁 #9E9E9E 已归档存储

1.5 费用类别定义

序号 类别名称 Emoji 预算额度
1 差旅费 🚗 ¥5,000
2 住宿费 🏨 ¥3,000
3 餐饮费 🍽️ ¥2,000
4 交通费 🚌 ¥1,500
5 办公费 📎 ¥1,000
6 通讯费 📞 ¥500
7 招待费 🎉 ¥2,000
8 其他 📦 ¥1,000

1.6 技术栈

技术领域 技术选型 版本要求
开发框架 Flutter >= 3.0.0
编程语言 Dart >= 2.17.0
设计规范 Material Design 3 -
状态管理 StatefulWidget -
数据存储 内存列表 -
目标平台 鸿蒙OS / Web API 21+

1.7 项目结构

复制代码 
lib/
└── main_electronic_invoice_manager.dart
    ├── ElectronicInvoiceManagerApp    # 应用入口
    ├── InvoiceType                    # 发票类型枚举
    ├── InvoiceStatus                  # 发票状态枚举
    ├── ExpenseCategory                # 费用类别枚举
    ├── Invoice                        # 发票模型
    ├── ReimbursementList              # 报销清单模型
    ├── ElectronicInvoiceManagerHomePage # 主页面（底部导航）
    ├── _buildInvoicesPage             # 发票页面
    ├── _buildReimbursementPage        # 报销页面
    ├── _buildStatisticsPage           # 统计页面
    └── _buildProfilePage              # 关于页面

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

ElectronicInvoiceManagerHomePage
发票页
报销页
统计页
关于页
扫描识别
发票列表
筛选过滤
选择创建
报销清单
导出Excel
类别分布
状态统计
功能说明
使用技巧
发票处理器

InvoiceProcessor
报销管理器

ReimbursementManager
统计计算器

StatisticsCalculator
Invoice

发票模型
ReimbursementList

报销清单
InvoiceType

发票类型
InvoiceStatus

发票状态
ExpenseCategory

费用类别

2.2 类图设计

has
has
has
contains
ElectronicInvoiceManagerApp
+Widget build()
<<enumeration>>
InvoiceType
+String label
+String emoji
+String description
+vat()
+electronic()
+train()
+flight()
+taxi()
+hotel()
+restaurant()
+other()
<<enumeration>>
InvoiceStatus
+String label
+String emoji
+Color color
+pending()
+verified()
+reimbursed()
+rejected()
+archived()
<<enumeration>>
ExpenseCategory
+String label
+String emoji
+double budget
+travel()
+accommodation()
+meal()
+transport()
+office()
+communication()
+entertainment()
+other()
Invoice
+String id
+String invoiceNumber
+InvoiceType type
+InvoiceStatus status
+ExpenseCategory category
+String merchant
+double amount
+double taxAmount
+DateTime invoiceDate
+DateTime createdAt
+String? filePath
+String? note
ReimbursementList
+String id
+String name
+List<Invoice> invoices
+DateTime createdAt
+String? approver
+String status
+getTotalAmount()
+getTotalTax()

2.3 页面导航流程

发票
报销
统计
关于
应用启动
发票页
底部导航
扫描识别
报销清单
统计分析
应用信息
选择发票
创建报销单
查看详情
导出Excel
类别分布
状态统计

2.4 发票处理流程

报销页 数据库 扫描器 发票页 用户 报销页 数据库 扫描器 发票页 用户 点击扫描 启动OCR识别 返回发票信息 选择发票 添加选中状态 创建报销单 生成报销清单 显示清单详情 导出Excel 下载报表文件

三、核心模块设计

3.1 数据模型设计

3.1.1 发票类型枚举 (InvoiceType)
dart 复制代码 
enum InvoiceType {
  vat(label: '增值税发票', emoji: '📄', description: '增值税普通/专用发票'),
  electronic(label: '电子发票', emoji: '📱', description: '电子普通发票'),
  train(label: '火车票', emoji: '🚄', description: '铁路客票'),
  flight(label: '机票', emoji: '✈️', description: '航空运输电子客票'),
  taxi(label: '出租车票', emoji: '🚕', description: '出租车发票'),
  hotel(label: '住宿发票', emoji: '🏨', description: '酒店住宿发票'),
  restaurant(label: '餐饮发票', emoji: '🍽️', description: '餐饮服务发票'),
  other(label: '其他发票', emoji: '📋', description: '其他类型发票');

  final String label;
  final String emoji;
  final String description;
}
3.1.2 发票状态枚举 (InvoiceStatus)
dart 复制代码 
enum InvoiceStatus {
  pending(label: '待处理', emoji: '⏳', color: Color(0xFFFF9800)),
  verified(label: '已验证', emoji: '✅', color: Color(0xFF4CAF50)),
  reimbursed(label: '已报销', emoji: '💰', color: Color(0xFF2196F3)),
  rejected(label: '已拒绝', emoji: '❌', color: Color(0xFFF44336)),
  archived(label: '已归档', emoji: '📁', color: Color(0xFF9E9E9E));

  final String label;
  final String emoji;
  final Color color;
}
3.1.3 发票模型 (Invoice)
dart 复制代码 
class Invoice {
  final String id;              // 发票ID
  final String invoiceNumber;   // 发票号码
  final InvoiceType type;       // 发票类型
  final InvoiceStatus status;   // 发票状态
  final ExpenseCategory category; // 费用类别
  final String merchant;        // 商户名称
  final double amount;          // 金额
  final double taxAmount;       // 税额
  final DateTime invoiceDate;   // 开票日期
  final DateTime createdAt;     // 创建时间
  final String? filePath;       // 文件路径
  final String? note;           // 备注
}
3.1.4 报销清单模型 (ReimbursementList)
dart 复制代码 
class ReimbursementList {
  final String id;              // 清单ID
  final String name;            // 清单名称
  final List<Invoice> invoices; // 发票列表
  final DateTime createdAt;     // 创建时间
  final String? approver;       // 审批人
  final String status;          // 状态

  double get totalAmount => invoices.fold(0, (sum, inv) => sum + inv.amount);
  double get totalTax => invoices.fold(0, (sum, inv) => sum + inv.taxAmount);
}
3.1.5 费用类别分布

35% 20% 15% 12% 8% 5% 3% 2% 费用类别分布示例 差旅费 住宿费 餐饮费 交通费 招待费 办公费 通讯费 其他

3.2 页面结构设计

3.2.1 主页面布局

ElectronicInvoiceManagerHomePage
IndexedStack
发票页
报销页
统计页
关于页
NavigationBar
发票 Tab
报销 Tab
统计 Tab
关于 Tab

3.2.2 发票页结构

发票页
SliverAppBar
快速统计
扫描按钮
筛选区域
选中信息
发票列表
发票总数
总金额
报销单数
发票类型
状态筛选
费用类别
发票卡片
类型图标
商户信息
状态标签
金额显示

3.2.3 发票卡片结构

发票卡片
头部区域
信息区域
金额区域
类型图标
商户名称
发票号码
状态标签
费用类别
开票日期
金额
税额

3.2.4 报销页结构

报销页
SliverAppBar
导出按钮
清单列表
报销卡片
发票数量
清单名称
金额统计
展开详情
发票明细
税额合计
总计金额

3.3 发票扫描逻辑

是
否
点击扫描按钮
启动相机/选择图片
OCR识别处理
识别成功?
提取发票信息
提示重新扫描
自动分类
生成发票记录
添加到列表
显示成功提示

3.4 报销清单创建逻辑

否
是
选择发票
发票数量>0?
提示选择发票
显示选中信息
点击创建报销单
生成报销清单
清空选中列表
添加到报销页
显示成功提示

四、UI设计规范

4.1 配色方案

应用以清新的绿色为主色调，象征财务管理的规范与高效：

颜色类型 色值 用途
主色 #43A047 (Green) 导航、主题元素
辅助色 #66BB6A 报销页面
第三色 #81C784 统计页面
强调色 #A5D6A7 关于页面
背景色 #FAFAFA 页面背景
卡片背景 #FFFFFF 发票卡片

4.2 状态颜色定义

状态 色值 视觉效果
待处理 #FF9800 橙色警示
已验证 #4CAF50 绿色通过
已报销 #2196F3 蓝色完成
已拒绝 #F44336 红色拒绝
已归档 #9E9E9E 灰色归档

4.3 字体规范

元素 字号 字重 颜色
页面标题 24px Bold 主色
商户名称 16px Bold #000000
金额数字 16px Bold 主色
状态标签 11px Regular 状态色
统计数字 20px Bold 白色

4.4 组件规范

4.4.1 扫描按钮
复制代码 
┌─────────────────────────────────────┐
│  [📷 扫描识别发票]                   │
│                                     │
│  全宽绿色填充按钮                    │
└─────────────────────────────────────┘
4.4.2 筛选下拉框
复制代码 
┌─────────────────────────────────────┐
│  发票类型      状态        费用类别  │
│  ┌────────┐ ┌────────┐ ┌────────┐  │
│  │📱电子发票▼│ │⏳待处理▼│ │🚗差旅费▼│  │
│  └────────┘ └────────┘ └────────┘  │
└─────────────────────────────────────┘
4.4.3 发票卡片
复制代码 
┌─────────────────────────────────────┐
│  📱 美团                    ✅ 已验证 │
│     12345678                        │
│                                     │
│  🍽️ 餐饮费    2024/3/15    ¥128.00  │
│                          税额: ¥7.68│
└─────────────────────────────────────┘
4.4.4 选中信息栏
复制代码 
┌─────────────────────────────────────┐
│  已选择 3 张发票  合计: ¥356.00     │
│                    [创建报销单]      │
└─────────────────────────────────────┘
4.4.5 报销清单卡片
复制代码 
┌─────────────────────────────────────┐
│  [5]  3月差旅报销                    │
│       5张发票 · ¥1,234.00           │
│       2024/3/20 · 待审批            │
│  ─────────────────────────────────  │
│  📄 中国国航        ¥580.00         │
│  🏨 如家酒店        ¥320.00         │
│  🍽️ 肯德基          ¥45.00         │
│  ─────────────────────────────────  │
│  税额合计: ¥74.00   总计: ¥1,308.00 │
└─────────────────────────────────────┘

五、核心功能实现

5.1 发票扫描实现

dart 复制代码 
void _scanInvoice() {
  setState(() {
    _isScanning = true;
  });

  Future.delayed(const Duration(seconds: 2), () {
    final newInvoice = Invoice(
      id: 'inv_${DateTime.now().millisecondsSinceEpoch}',
      invoiceNumber: '${10000000 + _random.nextInt(90000000)}',
      type: InvoiceType.electronic,
      status: InvoiceStatus.pending,
      category: ExpenseCategory.values[_random.nextInt(ExpenseCategory.values.length)],
      merchant: '新扫描商户',
      amount: 100 + _random.nextDouble() * 300,
      taxAmount: 10 + _random.nextDouble() * 30,
      invoiceDate: DateTime.now(),
    );

    setState(() {
      _invoices.insert(0, newInvoice);
      _isScanning = false;
    });
  });
}

5.2 创建报销清单实现

dart 复制代码 
void _createReimbursementList() {
  if (_selectedInvoices.isEmpty) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('请先选择发票')),
    );
    return;
  }

  final list = ReimbursementList(
    id: 'list_${DateTime.now().millisecondsSinceEpoch}',
    name: '报销清单 ${_reimbursementLists.length + 1}',
    invoices: List.from(_selectedInvoices),
  );

  setState(() {
    _reimbursementLists.insert(0, list);
    _selectedInvoices.clear();
  });
}

5.3 导出Excel实现

dart 复制代码 
void _exportToExcel() {
  setState(() {
    _isExporting = true;
  });

  Future.delayed(const Duration(seconds: 2), () {
    setState(() {
      _isExporting = false;
    });

    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Excel文件已导出')),
    );
  });
}

5.4 发票选择实现

dart 复制代码 
void _toggleInvoiceSelection(Invoice invoice) {
  setState(() {
    if (_selectedInvoices.any((inv) => inv.id == invoice.id)) {
      _selectedInvoices.removeWhere((inv) => inv.id == invoice.id);
    } else {
      _selectedInvoices.add(invoice);
    }
  });
}

5.5 统计计算实现

dart 复制代码 
Widget _buildStatisticsPage() {
  final categoryStats = <ExpenseCategory, double>{};
  for (var category in ExpenseCategory.values) {
    categoryStats[category] = _invoices
        .where((inv) => inv.category == category)
        .fold(0.0, (sum, inv) => sum + inv.amount);
  }

  return CustomScrollView(
    slivers: [
      // 统计头部
      // 类别分布条形图
      // 状态统计网格
    ],
  );
}

六、交互设计

6.1 发票管理流程

列表 扫描器 发票页 用户 列表 扫描器 发票页 用户 点击扫描 启动识别 返回信息 添加发票 选择发票 更新选中状态 创建报销单 生成清单 显示成功

6.2 报销清单流程

展开详情
导出Excel
打开报销页
显示清单列表
用户操作
显示发票明细
查看金额统计
生成报表文件
下载到本地

6.3 统计分析流程

计算各类别金额
统计各状态数量
统计页面
类别分布
状态统计
进度条显示
网格展示

七、扩展功能规划

7.1 后续版本规划

2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 2024-03-17 2024-03-24 2024-03-31 基础UI框架 发票扫描功能 报销清单管理 真实OCR集成 发票真伪验证 云端同步 AI智能分类 多公司管理 审批流程集成 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 电子发票智能管理应用开发计划

7.2 功能扩展建议

7.2.1 真实OCR识别

识别功能：

  • 百度/腾讯OCR API集成
  • 发票图片预处理
  • 多发票批量识别
  • 手写发票识别
7.2.2 发票真伪验证

验证功能：

  • 国税平台接口对接
  • 发票代码校验
  • 重复报销检测
  • 过期发票提醒
7.2.3 企业级功能

企业功能：

  • 多公司账套管理
  • 部门费用预算
  • 审批流程配置
  • 财务系统对接

八、注意事项

8.1 开发注意事项

  1. 数据安全：发票信息涉及财务隐私，需做好数据加密

  2. 性能优化：大量发票列表需使用分页加载

  3. 状态同步：发票状态变更需及时更新相关统计

  4. 金额精度：财务金额计算需注意精度问题

  5. 日期处理：发票日期需考虑时区和格式化

8.2 常见问题

问题 原因 解决方案
扫描识别失败 图片质量差 提示重新拍摄
金额计算偏差 浮点精度问题 使用decimal库
状态不更新 状态未同步 检查setState
导出失败 权限问题 申请存储权限
列表卡顿 数据量大 分页加载优化

8.3 使用技巧

📄 电子发票管理技巧 📄

扫描识别技巧

  • 保持发票平整，避免褶皱
  • 光线充足，避免阴影
  • 对准边框，完整拍摄
  • 清晰对焦，避免模糊

分类管理建议

  • 按费用类别归类
  • 按报销周期整理
  • 及时验证发票真伪
  • 定期备份重要数据

报销流程优化

  • 批量选择同类发票
  • 添加备注说明用途
  • 确认金额无误再提交
  • 保存导出记录备查

九、运行说明

9.1 环境要求

环境 版本要求
Flutter SDK >= 3.0.0
Dart SDK >= 2.17.0
鸿蒙OS API 21+
Web浏览器 Chrome 90+

9.2 运行命令

bash 复制代码 
# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_electronic_invoice_manager.dart --web-port 8141

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_electronic_invoice_manager.dart

# 代码分析
flutter analyze lib/main_electronic_invoice_manager.dart

十、总结

电子发票智能管理应用通过发票管理、报销清单、统计分析、关于信息四大模块，为财务人员和职场人士提供了一个便捷高效的发票管理平台。应用支持8种发票类型、5种发票状态、8种费用类别，让用户轻松管理电子发票，一键生成报销清单。

核心功能涵盖发票扫描识别、智能分类归档、报销清单创建、Excel报表导出四大模块。发票类型从增值税发票到餐饮发票，覆盖日常报销全场景；发票状态从待处理到已归档，完整追踪报销流程；费用类别从差旅费到通讯费，满足企业费用管理需求。

应用采用 Material Design 3 设计规范，以清新的绿色为主色调，象征财务管理的规范与高效。通过本应用，希望能够帮助财务人员提高工作效率，让发票管理变得轻松简单。

电子发票智能管理------财务人员的好帮手

相关推荐
HarmonyOS_SDK2 小时前
化繁为简：顺丰速运App如何通过 HarmonyOS SDK实现专业级空间测量
harmonyos
MonkeyKing2 小时前
Flutter刷新机制与重建优化
flutter
空中海2 小时前
4.4 动态与嵌套路由
flutter
不爱吃糖的程序媛3 小时前
鸿蒙三方库适配读懂 `HPKBUILD`：lycium 怎么知道「下载谁、怎么编、装到哪」？
服务器·华为·harmonyos
李游Leo3 小时前
别让压图拖垮首帧：系统 Picker + TaskPool + ImagePacker，把 HarmonyOS 图片整理链路做顺
harmonyos
2401_839633913 小时前
鸿蒙flutter第三方库适配 - 存储空间分析
flutter·华为·harmonyos
加农炮手Jinx3 小时前
Flutter 三方库 better_commit 的鸿蒙化适配指南 - 实现具备语义化提交规范与自动化交互的 Git 工作流插件、支持端侧版本工程的高效规范化审计实战
flutter·harmonyos·鸿蒙·openharmony·better_commit
空中海3 小时前
3.3 第三方框架
flutter·dart
麒麟ZHAO3 小时前
鸿蒙flutter第三方库适配 - 文件搜索工具
flutter·华为·harmonyos
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03GitHub 镜像站点04基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南05AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析06免费！不限量！用opencode接入英伟达（NVIDIA）大模型，轻松打造你的 AI 编程助手07Oh My Codex 快速使用指南08VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）09OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程10CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南