🚀运行效果展示

Flutter框架跨平台鸿蒙开发——报销单生成APP的开发流程

📝 前言

在企业日常运营中，报销单是一项高频使用的文档，传统的手工填写方式效率低下且容易出错。随着移动办公的普及，开发一款便捷的报销单生成APP显得尤为重要。本文将详细介绍基于Flutter框架开发跨平台鸿蒙报销单生成APP的完整流程，包括需求分析、技术选型、核心功能实现及项目总结。

📱 应用介绍

功能概述

报销单生成APP是一款帮助用户快速创建、预览和管理报销单的移动应用。用户可以通过简单的表单填写，自动生成规范的报销单，提高报销效率和准确性。

核心特性

• 📋 表单填写：直观的表单界面，支持报销人信息、部门、日期、事由等基本信息填写
• 📊 报销项管理：支持动态添加、删除和编辑报销项，自动计算小计和总计
• 🔍 实时预览：填写完成后可实时预览报销单效果
• 📱 跨平台支持：基于Flutter框架开发，同时支持鸿蒙、Android、iOS等平台
• 🎨 美观界面：采用Material Design设计语言，界面简洁美观

技术栈

技术/框架	版本	用途
Flutter	3.27.5-ohos-1.0.1	跨平台UI框架
Dart	3.4.6	开发语言
Material Design	-	UI设计语言
HarmonyOS SDK	-	鸿蒙平台支持

🏗️ 开发流程

1. 需求分析

在开发前，我们首先需要明确APP的核心功能和用户需求：

• 用户能够填写报销人基本信息
• 支持添加多个报销项，包括项目名称、数量、单价
• 自动计算每项小计和总金额
• 生成规范的报销单格式
• 支持预览生成的报销单

2. 项目结构设计

lib/
├── models/              # 数据模型层
│   └── expense_report_model.dart  # 报销单模型
├── pages/               # 页面层
│   └── expense_report_edit_page.dart  # 报销单填写和预览页面
└── main.dart            # 应用入口和路由配置

3. 核心功能实现

3.1 数据模型设计

首先，我们需要设计报销单的数据模型，包括报销单主信息和报销项明细：

/// 报销单模型类
class ExpenseReport {
  final String reporterName;  // 报销人姓名
  final String department;     // 部门
  final DateTime reportDate;   // 报销日期
  final String reason;         // 报销事由
  final List<ExpenseItem> expenseItems;  // 报销项列表
  
  // 计算总计金额
  double get totalAmount {
    return expenseItems.fold(0.0, (sum, item) => sum + item.subtotal);
  }
  
  // 构造函数和copyWith方法...
}

/// 报销项模型类
class ExpenseItem {
  final String itemName;  // 项目名称
  final int quantity;     // 数量
  final double unitPrice; // 单价
  
  // 计算小计金额
  double get subtotal {
    return quantity * unitPrice;
  }
  
  // 构造函数和copyWith方法...
}

3.2 报销单填写页面

报销单填写页面是APP的核心，包含以下主要功能：

1. 报销人信息填写：使用TextFormField实现姓名、部门、日期、事由的填写
2. 报销项动态管理：支持添加、删除报销项
3. 实时计算：自动计算每项小计和总金额
4. 表单验证：确保必填项完整填写

// 主要代码结构
class ExpenseReportEditPage extends StatefulWidget {
  @override
  State<ExpenseReportEditPage> createState() => _ExpenseReportEditPageState();
}

class _ExpenseReportEditPageState extends State<ExpenseReportEditPage> {
  final _formKey = GlobalKey<FormState>();
  final _reporterNameController = TextEditingController();
  final _departmentController = TextEditingController();
  final _reasonController = TextEditingController();
  DateTime _reportDate = DateTime.now();
  List<ExpenseItem> _expenseItems = [/* 初始报销项 */];
  
  // 控制器列表...
  
  // 添加报销项方法
  void _addExpenseItem() {
    setState(() {
      _expenseItems.add(const ExpenseItem(/* 初始值 */));
      // 添加对应的控制器...
    });
  }
  
  // 删除报销项方法...
  
  // 更新报销项方法...
  
  // 提交表单方法...
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('填写报销单')),
      body: SingleChildScrollView(
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              // 报销人信息卡片
              Card(/* 报销人信息表单 */),
              
              // 报销项列表卡片
              Card(
                child: Column(
                  children: [
                    // 报销项表头
                    const Row(/* 表头 */),
                    
                    // 报销项列表
                    for (int i = 0; i < _expenseItems.length; i++)
                      Row(/* 报销项表单 */),
                    
                    // 总计金额
                    Row(/* 总计 */),
                  ],
                ),
              ),
              
              // 提交按钮
              ElevatedButton(
                onPressed: _submitForm,
                child: const Text('生成报销单'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3.3 报销单预览页面

填写完成后，用户可以预览生成的报销单，包含完整的报销信息和格式：

class ExpenseReportPreviewPage extends StatelessWidget {
  final ExpenseReport report;
  
  const ExpenseReportPreviewPage({Key? key, required this.report}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('报销单预览'),
        actions: [/* 分享等操作按钮 */],
      ),
      body: SingleChildScrollView(
        child: Card(
          child: Padding(
            padding: const EdgeInsets.all(24.0),
            child: Column(
              children: [
                // 标题
                const Center(child: Text('报销单', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))),
                
                // 报销人信息
                Row(/* 报销人信息 */),
                
                // 报销项列表
                Column(/* 报销项列表 */),
                
                // 总计金额
                Row(/* 总计 */),
                
                // 签名区域
                Row(/* 签名区域 */),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

3.4 应用入口配置

在main.dart中配置应用入口和路由：

import 'package:flutter/material.dart';
import './pages/expense_report_edit_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '报销单生成器',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        // 其他主题配置...
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => const ExpenseReportEditPage(),
      },
      debugShowCheckedModeBanner: false,
    );
  }
}

4. 界面设计与用户体验

4.1 响应式布局

应用采用响应式布局设计，确保在不同尺寸的设备上都能正常显示：

• 使用SingleChildScrollView确保内容不会溢出
• 使用Expanded和Flex实现灵活的布局
• 使用Padding和SizedBox控制元素间距

4.2 表单验证

为了确保数据的准确性，应用实现了完善的表单验证：

• 必填项验证
• 数字格式验证
• 金额范围验证

4.3 实时计算

应用实现了实时计算功能，当用户修改报销项的数量或单价时，小计和总计金额会自动更新，提高了用户体验。

🎯 测试与调试

1. 本地测试

在开发过程中，我们使用Flutter的热重载功能进行快速调试：

flutter run -d chrome  # 在Chrome中运行
flutter run -d windows  # 在Windows中运行

2. 鸿蒙平台测试

对于鸿蒙平台，我们使用鸿蒙模拟器或真机进行测试：

flutter run  # 默认运行到鸿蒙设备

3. 功能测试

• ✅ 报销人信息填写功能
• ✅ 报销项添加、删除、编辑功能
• ✅ 金额自动计算功能
• ✅ 表单验证功能
• ✅ 报销单预览功能

📊 项目总结

开发成果

通过本次开发，我们成功实现了一款功能完整、界面美观的报销单生成APP，主要成果包括：

1. 完整的报销单填写功能：支持报销人信息和报销项的填写
2. 动态报销项管理：支持添加、删除和编辑报销项
3. 自动计算功能：实时计算小计和总计金额
4. 规范的报销单格式：生成符合企业标准的报销单
5. 跨平台支持：同时支持鸿蒙、Android、iOS等平台

技术亮点

1. 基于Flutter框架：实现了真正的跨平台开发，一套代码多端运行
2. 响应式设计：适配不同尺寸的设备
3. 组件化开发：代码结构清晰，易于维护和扩展
4. 良好的用户体验：直观的界面设计和流畅的操作流程

后续优化方向

1. 添加数据持久化：支持保存和加载报销单草稿
2. 实现导出功能：支持将报销单导出为PDF或图片格式
3. 添加审批流程：支持在线提交和审批报销单
4. 实现云同步：支持多设备间的数据同步
5. 添加报销历史记录：支持查看历史报销单

🚀 部署与发布

鸿蒙平台发布

1. 配置鸿蒙开发者账号
2. 生成签名证书
3. 构建鸿蒙HAP包
4. 上传到鸿蒙应用市场

其他平台发布

• Android：生成APK包，上传到Google Play或国内应用市场
• iOS：生成IPA包，上传到App Store
• Web：构建Web版本，部署到服务器

🌟 结语

本文详细介绍了基于Flutter框架开发跨平台鸿蒙报销单生成APP的完整流程。通过Flutter的跨平台特性，我们可以高效地开发出同时支持多种平台的应用，大大降低了开发成本和维护成本。

随着企业数字化转型的加速，移动办公应用的需求将持续增长。报销单生成APP作为企业移动办公的重要组成部分，具有广阔的应用前景。未来，我们将继续优化和扩展该应用的功能，为用户提供更加便捷、高效的报销体验。

📚 参考资料

• Flutter官方文档
• Dart编程语言指南
• HarmonyOS开发者文档
• Material Design设计指南

---

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net