油耗记录应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
油耗记录是一款专注于车辆油耗管理的移动应用，旨在帮助车主记录和分析车辆加油数据，掌握油耗变化趋势，实现智能化的用车成本管理。应用以蓝色为主色调，传递专业、可靠的品牌形象。
应用支持多车辆管理，可记录每次加油的里程、油量、金额、加油站等信息，自动计算百公里油耗，并通过图表直观展示油耗趋势和花费分布，帮助车主优化驾驶习惯，降低用车成本。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 加油记录 | 记录加油信息 | 表单输入 |
| 油耗计算 | 自动计算百公里油耗 | 公式计算 |
| 统计分析 | 油耗趋势和花费分析 | 图表展示 |
| 多车管理 | 支持多辆车辆管理 | 车辆列表 |
| 数据备份 | 云端数据备份恢复 | 数据导出 |
1.3 数据指标
| 指标名称 | 计算公式 | 说明 |
|---|---|---|
| 百公里油耗 | 加油量 ÷ 行驶里程 × 100 | 核心油耗指标 |
| 平均油耗 | 各次油耗的平均值 | 整体油耗水平 |
| 总花费 | 各次加油金额之和 | 累计加油支出 |
| 平均油价 | 各次油价的平均值 | 油价趋势参考 |
1.4 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.5 项目结构
lib/
└── main_fuel_tracker.dart
├── FuelTrackerApp # 应用入口
├── Vehicle # 车辆数据模型
├── FuelRecord # 加油记录模型
├── MainHomePage # 主页面（底部导航）
├── HomePage # 首页
├── RecordsPage # 记录列表页面
├── StatisticsPage # 统计分析页面
├── ProfilePage # 个人中心页面
├── FuelRecordCard # 记录卡片组件
└── AddRecordSheet # 添加记录表单二、系统架构
2.1 整体架构图
Data Layer
Presentation Layer
主页面
MainHomePage
首页
记录列表
统计分析
个人中心
车辆信息
最近记录
油耗趋势
记录筛选
记录卡片
关键指标
油耗分布
月度花费
车辆管理
数据备份
Vehicle
车辆模型
FuelRecord
记录模型
2.2 类图设计
manages
manages
displays
displays
lists
analyzes
creates
FuelTrackerApp
+Widget build()
Vehicle
+String id
+String name
+String plateNumber
+String brand
+String model
+String emoji
+double totalMileage
+String fuelType
FuelRecord
+String id
+String vehicleId
+DateTime date
+double mileage
+double liters
+double price
+double unitPrice
+String station
+String fuelType
+double previousMileage
+String note
+double consumption
MainHomePage
-int _currentIndex
-List<Widget> _pages
+Widget build()
HomePage
+Widget build()
+void _showAddRecordDialog()
RecordsPage
-String _selectedVehicleId
+Widget build()
StatisticsPage
+Widget build()
AddRecordSheet
-TextEditingController _litersController
-TextEditingController _priceController
-TextEditingController _mileageController
+Widget build()
2.3 页面导航流程
首页
记录
统计
我的
应用启动
主页面
底部导航
首页展示
记录列表页面
统计分析页面
个人中心页面
点击添加按钮
添加记录表单
保存记录
筛选车辆
查看记录列表
点击添加
查看统计数据
油耗分布
月度花费
2.4 数据流向图
数据 表单 首页 用户 数据 表单 首页 用户 查看油耗统计 获取加油记录 返回记录列表 计算平均油耗 展示统计数据 点击添加记录 弹出添加表单 填写加油信息 验证数据 保存记录 保存成功 显示成功提示
三、核心模块设计
3.1 数据模型设计
3.1.1 车辆模型 (Vehicle)
dart
class Vehicle {
final String id; // 唯一标识
final String name; // 车辆名称
final String plateNumber; // 车牌号
final String brand; // 品牌
final String model; // 型号
final String emoji; // 表情图标
final double totalMileage; // 总里程
final String fuelType; // 油品类型
}3.1.2 加油记录模型 (FuelRecord)
dart
class FuelRecord {
final String id; // 唯一标识
final String vehicleId; // 车辆ID
final DateTime date; // 加油日期
final double mileage; // 当前里程
final double liters; // 加油量（升）
final double price; // 总金额
final double unitPrice; // 单价
final String station; // 加油站
final String fuelType; // 油品类型
final double? previousMileage; // 上次里程
final String note; // 备注
// 计算百公里油耗
double get consumption {
if (previousMileage == null) return 0;
return liters / (mileage - previousMileage!) * 100;
}
}3.1.3 油耗计算公式
百公里油耗=加油量(升)本次里程−上次里程×100 百公里油耗 = \frac{加油量(升)}{本次里程 - 上次里程} \times 100 百公里油耗=本次里程−上次里程加油量(升)×100
平均油耗=∑i=1n油耗in 平均油耗 = \frac{\sum_{i=1}^{n} 油耗_i}{n} 平均油耗=n∑i=1n油耗i
3.2 页面结构设计
3.2.1 主页面布局
MainHomePage
IndexedStack
首页
记录列表
统计分析
个人中心
NavigationBar
首页 Tab
记录 Tab
统计 Tab
我的 Tab
3.2.2 首页结构
首页
头部区域
统计卡片
最近加油
油耗趋势
添加按钮
渐变背景
当前车辆
平均油耗
本月花费
记录卡片列表
柱状图
3.2.3 统计页面结构
统计页面
车辆信息卡
关键指标
油耗分布
月度花费
总里程
总加油
总花费
平均油耗
平均油价
加油次数
平均单次
油耗区间分布
月度花费柱状图
四、UI设计规范
4.1 配色方案
应用采用蓝色为主色调，传递专业、可靠的品牌形象：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #1565C0 (Blue) | 导航、强调元素 |
| 渐变起始 | #1565C0 | 头部渐变 |
| 渐变结束 | #42A5F5 | 头部渐变 |
| 成功色 | #4CAF50 | 优秀油耗 |
| 警告色 | #FF9800 | 一般油耗 |
| 背景色 | #F5F5F5 | 页面背景 |
4.2 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 20px | Medium | #000000 |
| 金额数字 | 18px | Bold | #000000 |
| 油耗指标 | 28px | Bold | 主题色 |
| 描述文字 | 12px | Regular | #757575 |
4.3 组件规范
4.3.1 加油记录卡片
┌─────────────────────────────────────────┐
│ ┌────┐ ¥318.75 8.5L/100km │
│ │ ⛽ │ 2024-01-15 │
│ └────┘ │
│ ⛽ 42.5L 🚗 45680km 💰 ¥7.50/L │
│ 📍 中石化杭州西湖加油站 │
└─────────────────────────────────────────┘4.3.2 统计指标卡片
┌─────────────────────┐
│ ⛽ 平均油耗 │
│ │
│ 7.8 L/100km │
│ │
│ [优秀] │
└─────────────────────┘4.3.3 油耗趋势图
┌─────────────────────────────────────────┐
│ 8.5 │
│ █ │
│ █ 7.8 │
│ █ █ 8.2 │
│ █ █ █ █ 7.5 │
│ █ █ █ █ █ █ │
│ 1/1 1/8 1/15 ... │
└─────────────────────────────────────────┘五、核心功能实现
5.1 油耗计算实现
dart
double get consumption {
if (previousMileage == null || previousMileage == mileage) return 0;
return liters / (mileage - previousMileage!) * 100;
}5.2 添加记录表单实现
dart
class AddRecordSheet extends StatefulWidget {
@override
State<AddRecordSheet> createState() => _AddRecordSheetState();
}
class _AddRecordSheetState extends State<AddRecordSheet> {
final _litersController = TextEditingController();
final _priceController = TextEditingController();
final _mileageController = TextEditingController();
DateTime _selectedDate = DateTime.now();
String _fuelType = '92#';
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom + 20,
),
child: Column(
children: [
TextField(controller: _litersController, ...),
TextField(controller: _priceController, ...),
TextField(controller: _mileageController, ...),
// 日期选择器
// 油品类型选择
FilledButton(onPressed: _saveRecord, child: Text('保存记录')),
],
),
);
}
}5.3 油耗趋势图表实现
dart
Widget _buildConsumptionChart(List<FuelRecord> records) {
final chartRecords = records.take(6).toList().reversed.toList();
final maxConsumption = chartRecords.fold<double>(
0,
(max, r) => r.consumption > max ? r.consumption : max
);
return Row(
children: chartRecords.map((record) {
final height = maxConsumption > 0
? (record.consumption / maxConsumption * 100)
: 0;
return Expanded(
child: Column(
children: [
Text(record.consumption.toStringAsFixed(1)),
Container(
height: height.clamp(10.0, 100.0).toDouble(),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue.shade400, Colors.blue.shade600],
),
),
),
Text('${record.date.month}/${record.date.day}'),
],
),
);
}).toList(),
);
}5.4 统计计算实现
dart
// 计算总加油量
final totalLiters = vehicleRecords.fold<double>(0, (sum, r) => sum + r.liters);
// 计算总花费
final totalCost = vehicleRecords.fold<double>(0, (sum, r) => sum + r.price);
// 计算平均油耗
final avgConsumption = vehicleRecords.isEmpty
? 0.0
: vehicleRecords.map((r) => r.consumption).reduce((a, b) => a + b) / vehicleRecords.length;
// 计算平均油价
final avgPrice = vehicleRecords.isEmpty
? 0.0
: vehicleRecords.map((r) => r.unitPrice).reduce((a, b) => a + b) / vehicleRecords.length;六、交互设计
6.1 添加记录流程
数据 表单 首页 用户 数据 表单 首页 用户 点击添加按钮 弹出底部表单 输入加油量 输入金额 输入里程 选择日期 选择油品 点击保存 保存记录 保存成功 显示成功提示
6.2 统计分析流程
进入统计页面
加载车辆数据
加载加油记录
计算关键指标
生成油耗分布
生成月度花费
展示统计结果
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 加油记录 油耗计算 统计分析 多车管理 数据备份 油价提醒 导出报表 加油站导航 保养提醒 AI分析 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 油耗记录应用开发计划
7.2 功能扩展建议
7.2.1 智能提醒功能
增强用户体验：
- 油价变动提醒
- 保养周期提醒
- 年检到期提醒
7.2.2 数据分析功能
深度数据分析：
- 驾驶习惯分析
- 油耗预测
- 费用预算
7.2.3 社交分享功能
用户交流平台：
- 油耗排行榜
- 省油技巧分享
- 加油站评价
八、注意事项
8.1 开发注意事项
-
数据模型：FuelRecord模型包含油耗计算属性
-
里程记录：需要记录上次里程才能计算油耗
-
数据验证：加油量和金额必须为正数
-
精度处理：油耗保留一位小数
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 油耗为0 | 缺少上次里程 | 确保连续记录 |
| 数据异常 | 输入错误 | 添加数据验证 |
| 图表不显示 | 记录不足 | 至少需要2条记录 |
| 金额计算错误 | 单价乘积误差 | 使用精确计算 |
8.3 使用提示
⛽ 省油小贴士 ⛽
平稳驾驶：避免急加速和急刹车。
合理胎压：保持标准胎压减少阻力。
定期保养：保持发动机良好状态。
减轻负重：清理车内不必要的物品。
九、运行说明
9.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
9.2 运行命令
bash
# 查看可用设备
flutter devices
# 运行到Web服务器
flutter run -d web-server -t lib/main_fuel_tracker.dart --web-port 8101
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_fuel_tracker.dart
# 运行到Windows
flutter run -d windows -t lib/main_fuel_tracker.dart
# 代码分析
flutter analyze lib/main_fuel_tracker.dart十、总结
油耗记录应用通过系统化的加油数据管理，为车主提供了一个便捷的油耗追踪工具。应用支持多车辆管理，可记录每次加油的详细信息，自动计算百公里油耗，并通过图表直观展示油耗趋势和花费分布。
核心功能涵盖加油记录、油耗计算、统计分析、多车管理四大模块。加油记录支持输入加油量、金额、里程、加油站等信息；油耗计算自动根据里程差计算百公里油耗；统计分析提供油耗分布和月度花费图表；多车管理支持添加和切换不同车辆。
应用采用Material Design 3设计规范，以蓝色为主色调，界面专业简洁。通过本应用，希望能够帮助车主掌握油耗变化，优化驾驶习惯，降低用车成本。
智能管理，省钱省心