【flutter for open harmony】第三方库Flutter 鸿蒙版记账分类统计实战指南（适配 1.0.0）✨

记账分类统计帮助用户了解消费结构，本文将带领大家使用Flutter开发一个记账分类统计应用。问题：用户自定义分类解决方案：支持动态分类本文详细介绍了Flutter鸿蒙记账分类统计的实现，包括数据聚合、分类统计等核心技术。通过本实例，掌握了fold和Map操作的使用方法。

keen5555

13人浏览 · 2026-05-01 02:50:32

keen5555 · 2026-05-01 02:50:32 发布

【flutter for open harmony】第三方库Flutter 鸿蒙版记账分类统计实战指南（适配 1.0.0）✨

Flutter实战：记账分类统计

Flutter 三方库 cached_network_image 的鸿蒙化适配与实战指南
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

本文详细介绍如何在Flutter鸿蒙应用中实现记账分类统计功能，按分类统计收支。

一、前言

记账分类统计帮助用户了解消费结构，本文将带领大家使用Flutter开发一个记账分类统计应用。

二、效果展示

在这里插入图片描述

2.1 功能特性

功能	描述
收支统计	统计总收入支出
分类展示	按分类展示数据
百分比计算	计算各类占比
进度条显示	可视化展示比例

三、项目背景与目标

3.1 项目背景

用户需要了解自己的消费结构，分类统计很有必要。

3.2 项目目标

实现收支统计
支持分类展示
提供可视化图表

四、技术架构设计

4.1 核心技术

StatefulWidget: 状态管理
LinearProgressIndicator: 进度条
fold: 数据聚合

4.2 实现原理

使用fold聚合数据，通过进度条可视化展示比例。

五、详细实现

5.1 Flutter端实现

import 'package:flutter/material.dart';

class CategoryStatisticsPage extends StatefulWidget {
  const CategoryStatisticsPage({super.key});

  @override
  State<CategoryStatisticsPage> createState() => _CategoryStatisticsPageState();
}

class _CategoryStatisticsPageState extends State<CategoryStatisticsPage> {
  final List<Map<String, dynamic>> _records = [
    {'type': 'expense', 'category': '餐饮', 'amount': 35.0},
    {'type': 'expense', 'category': '交通', 'amount': 15.0},
    {'type': 'income', 'category': '工资', 'amount': 8000.0},
  ];

  double get _totalIncome => _records
      .where((r) => r['type'] == 'income')
      .fold<double>(0, (sum, r) => sum + (r['amount'] as double));

  double get _totalExpense => _records
      .where((r) => r['type'] == 'expense')
      .fold<double>(0, (sum, r) => sum + (r['amount'] as double));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('记账分类统计'),
        centerTitle: true,
        backgroundColor: Colors.indigo,
        foregroundColor: Colors.white,
      ),
      body: Column(
        children: [
          Container(
            padding: const EdgeInsets.all(24),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text('收入: ¥${_totalIncome.toStringAsFixed(0)}'),
                Text('支出: ¥${_totalExpense.toStringAsFixed(0)}'),
              ],
            ),
          ),
          Expanded(
            child: ListView(
              children: _expenseByCategory.entries.map((e) {
                final percent = _totalExpense > 0 ? e.value / _totalExpense : 0;
                return Column(
                  children: [
                    Text('${e.key}: ¥${e.value.toStringAsFixed(0)}'),
                    LinearProgressIndicator(value: percent),
                  ],
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }

  Map<String, double> get _expenseByCategory {
    final result = <String, double>{};
    for (var record in _records.where((r) => r['type'] == 'expense')) {
      final category = record['category'] as String;
      result[category] = (result[category] ?? 0) + (record['amount'] as double);
    }
    return result;
  }
}

六、核心功能解析

6.1 数据聚合

使用fold聚合数据：

double get _totalExpense => _records
    .where((r) => r['type'] == 'expense')
    .fold<double>(0, (sum, r) => sum + (r['amount'] as double));

6.2 分类统计

按分类聚合数据：

Map<String, double> get _expenseByCategory {
  final result = <String, double>{};
  for (var record in _records.where((r) => r['type'] == 'expense')) {
    final category = record['category'] as String;
    result[category] = (result[category] ?? 0) + (record['amount'] as double);
  }
  return result;
}