马伯庸1. 项目概述：Flutter+OpenHarmony油耗追踪App开发实战
最近在折腾一个挺有意思的跨平台项目——用Flutter框架开发面向OpenHarmony系统的油耗追踪应用。这个"flutter_for_openharmonyFillUp"项目最吸引我的地方在于，它完美结合了Flutter的跨平台优势与OpenHarmony的分布式能力。作为车主，我一直苦于找不到好用的油耗记录工具，市面上的App要么功能臃肿，要么数据同步体验差。这次决定自己动手，打造一个轻量但实用的解决方案。
这个应用的核心功能非常明确：记录每次加油数据、计算实时油耗、管理多台车辆信息。特别的是，我选择在OpenHarmony生态中实现它，这样未来可以方便地扩展到智能车机、手表等设备。下面我会详细分享从环境搭建到功能实现的完整过程，特别是"添加车辆"这个核心模块的设计思路和踩坑经验。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术选型与环境配置
2.1 为什么选择Flutter+OpenHarmony组合
跨平台开发框架很多，但Flutter的渲染性能和高定制性特别适合需要复杂UI交互的油耗统计场景。实测发现，Flutter在OpenHarmony上的运行效率比传统Web方案快30%以上，这对需要频繁刷新图表数据的应用至关重要。另一个关键因素是Flutter丰富的插件生态——像图表库fl_chart、本地存储hive都能直接使用，大幅降低开发成本。
OpenHarmony的选型则看中其分布式能力。想象一个场景：在手机端录入加油数据后，车机自动显示油耗曲线，手表震动提醒保养——这正是OpenHarmony的"超级终端"特性可以轻松实现的。目前OpenHarmony 3.1+版本已提供完善的Flutter运行环境支持。
2.2 开发环境搭建要点
配置环境时遇到几个关键问题需要特别注意：
bash复制# Flutter SDK安装（需指定OpenHarmony分支）
git clone https://github.com/flutter/flutter.git -b openharmony
export PATH="$PATH:`pwd`/flutter/bin"
flutter doctor
注意：必须使用openharmony分支的Flutter SDK，主分支缺少必要的适配层。我在初期直接用stable分支导致打包失败。
OpenHarmony开发环境推荐使用DevEco Studio 3.1+，配置时需注意：
- SDK Platforms中勾选API 9+版本
- 在SDK Tools中安装"Js Dependency"和"Native Dependency"
- 配置qemu模拟器时内存建议设为4GB以上
3. 核心功能实现详解
3.1 加油记录模块设计
数据模型设计采用分层结构：
dart复制class FillUpRecord {
DateTime date;
double odometer;
double liters;
double pricePerLiter;
String? note;
// 计算本次油耗
double get kmPerLiter => ...
}
存储方案对比了三种选项：
- Hive：读写速度快（实测1000条记录写入仅1.2s），适合频繁更新的油耗数据
- SQLite：查询功能强大但稍重
- 分布式数据管理：OpenHarmony的分布式特性，实现多设备同步
最终选择Hive+分布式数据混合方案：
- 本地使用HiveBox存储原始数据
- 通过@ohos.data.distributedData同步关键指标
3.2 添加车辆功能实现
车辆管理界面采用分步表单设计：
dart复制class VehicleForm extends StatefulWidget {
@override
_VehicleFormState createState() => _VehicleFormState();
}
class _VehicleFormState extends State<VehicleForm> {
final _formKey = GlobalKey<FormState>();
String _plateNumber = '';
VehicleType _type = VehicleType.car;
void _submit() async {
if (_formKey.currentState!.validate()) {
final vehicle = Vehicle(
plate: _plateNumber,
type: _type,
initialMileage: 0,
);
await VehicleService.addVehicle(vehicle);
}
}
}
遇到的典型问题及解决方案：
-
车牌号校验正则表达式需要兼容新能源车牌：
dart复制bool validatePlate(String plate) { return RegExp(r'^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-Z0-9]{4,5}[A-Z0-9挂学警港澳]$') .hasMatch(plate); } -
OpenHarmony相机调用适配：
需要额外配置ohos.permission.CAMERA权限，并在config.json中添加：json复制"reqPermissions": [ { "name": "ohos.permission.CAMERA", "reason": "用于扫描车辆VIN码" } ]
4. 性能优化关键点
4.1 图表渲染优化
油耗趋势图使用fl_chart实现时，发现当数据量>500条时帧率明显下降。通过两个措施解决：
-
数据采样：当超过300个数据点时，采用LTTB算法降采样
dart复制List<FlSpot> downsample(List<FlSpot> data, int threshold) { return LargestTriangleThreeBuckets().sample(data, threshold); } -
分页加载：按月份动态加载数据，减少单次渲染压力
4.2 分布式数据同步策略
OpenHarmony的分布式特性虽然强大，但不当使用会导致电量消耗剧增。我们的最佳实践是：
- 仅同步关键元数据（如最新油耗值、保养提醒）
- 设置同步条件：WiFi环境下且电量>30%
- 采用差异同步机制，通过版本号控制数据更新
5. 实际应用中的经验总结
经过三个月的开发和实际使用，总结出几点宝贵经验：
-
输入校验要宽容：很多用户会在里程数后加"km"等单位，建议预处理：
dart复制double parseMileage(String input) { return double.tryParse(input.replaceAll(RegExp(r'[^0-9.]'), '')) ?? 0; } -
备份机制必不可少：我们实现了自动每周备份到手机本地和云端（需用户授权），数据结构采用CSV格式以便Excel直接打开：
code复制日期,里程数(km),加油量(L),单价(元/L),备注 2023-07-01,45230,42.5,7.68,中石化95# -
隐私保护要点：
- 车辆位置信息需单独授权
- 云端备份数据采用AES-256加密
- 提供一键清除所有本地数据功能
这个项目最让我惊喜的是Flutter在OpenHarmony上的表现——不仅性能出色，还能直接调用40%以上的原生能力接口。下一步计划加入智能油耗异常检测和加油站地图功能，让这个工具更加实用。