记账本应用

---

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

一、项目概述

运行效果图

1.1 应用简介

记账本是一款简洁实用的个人财务管理应用，致力于帮助用户养成良好记账习惯，实现财务自由的第一步。应用采用清新的绿色主题设计，象征财富增长与生机活力。无论是日常消费记录、月度预算管理，还是支出统计分析，用户都能在直观的界面中轻松完成。

从早餐咖啡到房租水电，从工资收入到投资理财，本应用全方位记录用户的每一笔收支。特别值得一提的是智能分类功能，支持餐饮、交通、购物、娱乐等8大支出分类和工资、奖金、投资等6大收入分类，让账目清晰明了。配合饼图统计和分类排行，用户可以一目了然地了解自己的消费结构。

1.2 核心功能

功能模块	功能描述	实现方式
快速记账	一键记录收支	底部弹窗表单
分类管理	8种支出+6种收入分类	枚举类型定义
月度预算	设置月度消费上限	预算进度条展示
账单列表	按日期分组展示	Map分组算法
统计分析	饼图+分类排行	CustomPaint绑定
数据筛选	按月份查看账单	日期选择器

1.3 支出分类概览

分类名称	英文标识	图标	颜色	典型场景
餐饮	food	restaurant	橙色	早中晚餐、零食饮料
交通	transport	directions_car	蓝色	地铁、公交、打车
购物	shopping	shopping_bag	粉色	衣服、日用品
娱乐	entertainment	movie	紫色	电影、游戏、KTV
住房	housing	home	青色	房租、水电、物业
医疗	medical	medical_services	红色	看病、买药
教育	education	school	靛蓝	书籍、课程
其他	other	more_horiz	灰色	无法归类的支出

1.4 收入分类概览

分类名称	英文标识	图标	说明
工资	salary	work	固定薪资收入
奖金	bonus	card_giftcard	绩效、年终奖
投资	investment	trending_up	理财、股票收益
兼职	partTime	access_time	副业收入
礼金	gift	card_giftcard	红包、礼金
其他	other	more_horiz	其他收入来源

1.5 技术栈

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

1.6 项目结构

lib/
└── main_account_book.dart
    ├── AccountBookApp           # 应用入口
    ├── TransactionType          # 交易类型枚举
    ├── ExpenseCategory          # 支出分类枚举
    ├── IncomeCategory           # 收入分类枚举
    ├── Transaction              # 交易记录模型
    ├── Budget                   # 预算模型
    ├── HomePage                 # 主页面
    │   ├── _buildHomePage()     # 首页
    │   ├── _buildStatisticsPage() # 统计页
    │   └── _buildAccountPage()  # 我的页
    ├── _AddTransactionForm      # 添加交易表单
    └── PieChartPainter          # 饼图绘制器

---

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 数据流程图

2.4 记账流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 交易记录模型 (Transaction)

class Transaction {
  final String id;                    // 唯一标识
  final TransactionType type;         // 交易类型
  final double amount;                // 金额
  final ExpenseCategory? expenseCategory;  // 支出分类
  final IncomeCategory? incomeCategory;    // 收入分类
  final String description;           // 说明
  final DateTime date;                // 日期
  final String? note;                 // 备注
}

3.1.2 预算模型 (Budget)

class Budget {
  final ExpenseCategory category;     // 分类
  final double limit;                 // 预算上限
  final double spent;                 // 已支出金额
  
  double get remaining => limit - spent;    // 剩余预算
  double get percentage => spent / limit;   // 使用比例
}

3.1.3 交易类型枚举 (TransactionType)

3.2 分类体系设计

3.2.1 支出分类

3.2.2 收入分类

3.3 页面结构设计

3.3.1 首页模块

3.3.2 统计页面

3.4 状态管理

3.4.1 核心状态变量

class _HomePageState extends State<HomePage> {
  final List<Transaction> _transactions = [];  // 所有交易记录
  int _currentIndex = 0;                        // 当前页面索引
  double _monthlyBudget = 5000;                 // 月度预算
  DateTime _selectedMonth = DateTime.now();     // 选中月份
}

3.4.2 计算属性

List<Transaction> get _monthTransactions {
  return _transactions.where((t) {
    return t.date.year == _selectedMonth.year && 
           t.date.month == _selectedMonth.month;
  }).toList();
}

double get _totalExpense {
  return _monthTransactions
      .where((t) => t.type == TransactionType.expense)
      .fold(0, (sum, t) => sum + t.amount);
}

double get _balance => _totalIncome - _totalExpense;

---

四、UI设计规范

4.1 配色方案

应用采用清新的绿色主题，象征财富增长：

颜色类型	色值	用途
主色	Green (Material)	AppBar、按钮、强调元素
背景色	#F5F5F5	页面背景
卡片背景	#FFFFFF	卡片、弹窗
支出颜色	Red	支出金额、支出标签
收入颜色	Green	收入金额、收入标签

分类专属颜色：

// 餐饮 - 橙色
Colors.orange

// 交通 - 蓝色
Colors.blue

// 购物 - 粉色
Colors.pink

// 娱乐 - 紫色
Colors.purple

// 住房 - 青色
Colors.teal

// 医疗 - 红色
Colors.red

// 教育 - 靛蓝
Colors.indigo

// 其他 - 灰色
Colors.grey

4.2 字体规范

元素	字号	字重	颜色
结余金额	28px	Bold	#FFFFFF
交易金额	16px	Bold	分类颜色
交易说明	15px	w500	#000000
分类名称	12px	Regular	#757575
日期标签	14px	w500	#000000

4.3 组件规范

4.3.1 汇总卡片

┌─────────────────────────────────────────────────┐
│  2024年4月                              预算5000│
│  本月结余                                  67%  │
│  ¥3,256.50                                     │
│  ████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│                                                 │
│      ¥8,500.00          ¥5,243.50              │
│        收入                支出                 │
└─────────────────────────────────────────────────┘

4.3.2 交易卡片

┌─────────────────────────────────────────────────┐
│  🍔  午餐                              -35.50  │
│      餐饮                                        │
└─────────────────────────────────────────────────┘

4.3.3 日期分组

┌─────────────────────────────────────────────────┐
│  今天                              -150.50      │
├─────────────────────────────────────────────────┤
│  🍔  午餐                              -35.50  │
│  🚗  地铁                              -6.00   │
│  🛍️  衣服                              -109.00 │
└─────────────────────────────────────────────────┘

4.4 图表设计

4.4.1 饼图统计

class PieChartPainter extends CustomPainter {
  final Map<ExpenseCategory, double> data;
  
  @override
  void paint(Canvas canvas, Size size) {
    // 绘制饼图扇形
    // 绘制图例标签
  }
}

4.4.2 进度条

LinearProgressIndicator(
  value: budgetUsed.clamp(0.0, 1.0),
  backgroundColor: Colors.white.withValues(alpha: 0.3),
  valueColor: AlwaysStoppedAnimation<Color>(
    isOverBudget ? Colors.orange : Colors.white,
  ),
  minHeight: 8,
)

---

五、核心功能实现

5.1 交易记录添加

void _addTransaction(Transaction transaction) {
  setState(() {
    _transactions.insert(0, transaction);
  });
}

void _saveTransaction() {
  final transaction = Transaction(
    id: DateTime.now().millisecondsSinceEpoch.toString(),
    type: _isExpense ? TransactionType.expense : TransactionType.income,
    amount: amount,
    expenseCategory: _isExpense ? _selectedExpenseCategory : null,
    incomeCategory: _isExpense ? null : _selectedIncomeCategory,
    description: _descriptionController.text,
    date: _selectedDate,
    note: _noteController.text.isEmpty ? null : _noteController.text,
  );

  widget.onAdd(transaction);
}

5.2 日期分组算法

Map<DateTime, List<Transaction>> _groupTransactionsByDate(List<Transaction> transactions) {
  final map = <DateTime, List<Transaction>>{};
  for (var t in transactions) {
    final date = DateTime(t.date.year, t.date.month, t.date.day);
    map[date] = (map[date] ?? [])..add(t);
  }
  return map;
}

5.3 月度数据筛选

List<Transaction> get _monthTransactions {
  return _transactions.where((t) {
    return t.date.year == _selectedMonth.year && 
           t.date.month == _selectedMonth.month;
  }).toList();
}

5.4 分类统计计算

Map<ExpenseCategory, double> get _expenseByCategory {
  final map = <ExpenseCategory, double>{};
  for (var t in _monthTransactions.where((t) => t.type == TransactionType.expense)) {
    map[t.expenseCategory!] = (map[t.expenseCategory!] ?? 0) + t.amount;
  }
  return map;
}

5.5 预算进度计算

Widget _buildSummaryCard() {
  final budgetUsed = _totalExpense / _monthlyBudget;
  final isOverBudget = _totalExpense > _monthlyBudget;

  return Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: isOverBudget
            ? [Colors.red, Colors.red.withValues(alpha: 0.7)]
            : [Colors.green, Colors.green.withValues(alpha: 0.7)],
      ),
    ),
    child: Column(
      children: [
        LinearProgressIndicator(
          value: budgetUsed.clamp(0.0, 1.0),
        ),
      ],
    ),
  );
}

---

六、财务知识拓展

6.1 个人财务管理原则

6.1.1 50/30/20法则

支出类别	占比	包含项目
必需支出	50%	房租、水电、交通、餐饮
个人消费	30%	娱乐、购物、旅游
储蓄投资	20%	存款、理财、保险

6.1.2 复利计算

复利公式：

$$A=P(1+r{)}^n$$

其中：

• $A$ 为最终金额
• $P$ 为本金
• $r$ 为年利率
• $n$ 为年数

6.2 消费分析指标

6.2.1 恩格尔系数

恩格尔系数是食品支出占个人消费支出的比重，是衡量生活水平的重要指标。

$$EngelCoefficient=\frac{FoodExpenditure}{TotalExpenditure}\times 100\%$$

恩格尔系数	生活水平
> 60%	贫困
50-60%	温饱
40-50%	小康
30-40%	富裕
< 30%	最富裕

6.2.2 储蓄率计算

6.3 预算管理技巧

6.3.1 零基预算法

6.3.2 分类预算建议

分类	建议占比	备注
餐饮	15-20%	减少外卖，多做饭
交通	5-10%	优先公共交通
购物	10-15%	区分需要与想要
娱乐	5-10%	设定月度上限
住房	25-30%	不超过收入30%

---

七、扩展功能规划

7.1 后续版本规划

7.2 功能扩展建议

7.2.1 数据持久化

使用本地数据库存储：

• SharedPreferences 存储设置
• SQLite 存储交易记录
• 支持数据备份恢复

7.2.2 智能提醒

class BudgetAlert {
  final double threshold;    // 预警阈值
  final bool enabled;        // 是否启用
  final String message;      // 提醒内容
}

7.2.3 数据可视化增强

图表类型	用途
折线图	收支趋势
柱状图	月度对比
雷达图	消费结构

---

八、注意事项

8.1 开发注意事项

1. 金额精度：使用 double 类型存储金额，注意浮点数精度问题

2. 日期处理：统一使用 DateTime 类型，注意时区问题

3. 数据验证：输入金额时进行有效性校验

4. 用户体验：提供快速记账入口，减少操作步骤

8.2 数据安全

🔒 数据安全建议 🔒

• 敏感数据加密存储
• 支持指纹/面容解锁
• 定期数据备份
• 隐私数据不联网

8.3 常见问题

问题	原因	解决方案
金额显示异常	浮点数精度	使用 toStringAsFixed(2)
日期分组错误	时区问题	统一使用本地时间
统计数据不准	筛选条件错误	检查月份筛选逻辑
预算超支未提醒	未实现提醒	添加阈值检测

---

九、运行说明

9.1 环境要求

环境	版本要求
Flutter SDK	>= 3.0.0
Dart SDK	>= 2.17.0
鸿蒙OS	API 21+

9.2 运行命令

# 查看可用设备
flutter devices

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

# 运行到Windows
flutter run -d windows -t lib/main_account_book.dart

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

---

十、总结

记账本应用通过简洁直观的界面设计和完善的记账功能，帮助用户轻松管理个人财务。应用采用清新的绿色主题，象征财富增长与生机活力；代码结构清晰，遵循Flutter最佳实践；数据模型设计合理，便于后续扩展更多功能。

核心功能涵盖快速记账、分类管理、月度预算、账单列表和统计分析，全方位满足用户的记账需求。特别值得一提的是智能分类功能，支持8种支出分类和6种收入分类，配合饼图统计和分类排行，让用户清晰了解自己的消费结构。

预算管理功能帮助用户控制支出，当支出超过预算时，界面会自动变为红色警示，提醒用户注意消费。通过本应用，用户可以养成良好的记账习惯，实现财务管理的第一步，让每一分钱都花得明明白白。

记账从今天开始，财富从点滴积累