【maaath】 Flutter for OpenHarmony 饮水水质监测应用开发实战

Flutter for OpenHarmony 饮水水质监测应用开发实战

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

作者：maaath

一、引言

随着人们对健康饮水的关注度日益提升，水质监测已成为日常生活中不可或缺的一部分。无论是家庭自来水、办公室饮水机，还是小区直饮水站，了解水质状况对保障健康至关重要。

本文基于 Flutter for OpenHarmony 跨平台框架，从零构建一款功能完整的饮水水质监测应用。通过本文，你将学习到：

• 如何在 Flutter for OpenHarmony 中设计复杂的数据模型
• 如何使用 CustomPaint 自绘图表和地图
• 如何实现多维度数据筛选、对比分析和报告导出
• 如何将应用成功运行在鸿蒙设备上

本文所有代码均已在鸿蒙设备上验证通过，完整源码托管于 AtomGit 平台。

二、应用功能概览

饮水水质监测应用包含以下八大核心功能模块：

三、数据模型设计

首先，我们定义水质检测记录的数据模型。在 Flutter for OpenHarmony 中，数据模型使用标准的 Dart 类定义即可，无需任何平台特定代码。

classWaterQualityRecord{finalStringid;finalStringlocationName;finaldouble latitude;finaldouble longitude;finalDateTimetestTime;finaldouble ph;finaldouble turbidity;finaldouble tds;finaldouble chlorine;finaldouble hardness;finaldouble temperature;finaldouble coliform;finalStringwaterSource;finalStringnotes;finalbool isCompliant;WaterQualityRecord({requiredthis.id,requiredthis.locationName,requiredthis.latitude,requiredthis.longitude,requiredthis.testTime,requiredthis.ph,requiredthis.turbidity,requiredthis.tds,requiredthis.chlorine,requiredthis.hardness,requiredthis.temperature,requiredthis.coliform,requiredthis.waterSource,this.notes='',requiredthis.isCompliant,});}

isCompliant字段用于标识该条记录是否达标，其判断逻辑在服务层中根据国家标准动态计算。此外，我们还定义了水质标准、地点水质、安全建议、对比结果和导出报告等模型，共同构成完整的数据体系。

四、服务层实现

服务层采用单例模式，与 Flutter for OpenHarmony 项目中的其他服务保持一致。核心功能包括数据初始化、记录管理、达标判断、对比分析和报告生成。

classWaterQualityService{staticfinalWaterQualityService_instance=WaterQualityService._();factoryWaterQualityService()=>_instance;WaterQualityService._();finalList<WaterQualityRecord>_records=[];finalList<LocationWaterQuality>_locations=[];finalList<SafetyAdvice>_advices=[];finalList<WaterQualityStandard>_standards=[];// 初始化国家标准void_initStandards(){_standards.addAll([WaterQualityStandard(parameterName:'pH值',unit:'',minValue:6.5,maxValue:8.5,description:'饮用水pH值应在6.5-8.5之间',),WaterQualityStandard(parameterName:'浊度',unit:'NTU',minValue:0,maxValue:1,description:'饮用水浊度不应超过1 NTU',),WaterQualityStandard(parameterName:'TDS',unit:'mg/L',minValue:0,maxValue:500,description:'溶解性总固体不应超过500 mg/L',),// ... 更多标准]);}// 达标判断逻辑bool_checkCompliance(WaterQualityRecordr){returnr.ph>=6.5&&r.ph<=8.5&&r.turbidity<=1.0&&r.tds<=500&&r.chlorine>=0.05&&r.chlorine<=0.3&&r.hardness<=450&&r.coliform==0;}}

服务层中的达标判断逻辑完全基于《生活饮用水卫生标准》（GB 5749-2022），确保检测结果的权威性和准确性。在 Flutter for OpenHarmony 中，服务层的代码无需任何修改即可跨平台运行。

五、UI 实现亮点

5.1 首页仪表盘

首页展示水质达标率环形指示器和关键参数概览卡片。使用CustomScrollView+SliverAppBar实现可折叠头部，带来流畅的滚动体验。

Widget_buildOverviewCards(double complianceRate){finalcolor=complianceRate>=90?Colors.green:complianceRate>=70?Colors.orange:Colors.red;returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:LinearGradient(colors:[color.withValues(alpha:0.8),color],),borderRadius:BorderRadius.circular(16),),child:Row(children:[Container(width:80,height:80,decoration:BoxDecoration(shape:BoxShape.circle,border:Border.all(color:Colors.white,width:4),),child:Center(child:Text('${complianceRate.toStringAsFixed(0)}%',style:constTextStyle(color:Colors.white,fontSize:22,fontWeight:FontWeight.bold,),),),),constSizedBox(width:20),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constText('水质达标率',style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.bold,),),Text(complianceRate>=90?'水质优良，请放心饮用':complianceRate>=70?'水质一般，建议关注':'水质较差，需要改善',style:constTextStyle(color:Colors.white70,fontSize:14),),],),),],),);}

5.2 自绘折线图

图表功能使用 Flutter 的CustomPaint实现，无需引入第三方图表库，在鸿蒙设备上完美运行。支持贝塞尔曲线平滑连接、渐变填充区域和交互式数据点。

class_LineChartPainterextendsCustomPainter{finalList<WaterQualityRecord>records;finalStringparameter;finalColorlineColor;@overridevoidpaint(Canvascanvas,Sizesize){// 提取参数值finalvalues=records.map((r){switch(parameter){case'pH值':returnr.ph;case'浊度':returnr.turbidity;case'TDS':returnr.tds;case'余氯':returnr.chlorine;case'总硬度':returnr.hardness;default:return0.0;}}).toList();// 计算坐标映射finalmaxVal=values.reduce((a,b)=>a>b?a:b);finalminVal=values.reduce((a,b)=>a<b?a:b);finalchartRange=(maxVal-minVal)*1.2;// 绘制贝塞尔曲线finalpath=Path();path.moveTo(points.first.dx,points.first.dy);for(int i=1;i<points.length;i++){finalprev=points[i-1];finalcurr=points[i];finalcp1=Offset(prev.dx+(curr.dx-prev.dx)/3,prev.dy,);finalcp2=Offset(prev.dx+2*(curr.dx-prev.dx)/3,curr.dy,);path.cubicTo(cp1.dx,cp1.dy,cp2.dx,cp2.dy,curr.dx,curr.dy);}canvas.drawPath(path,linePaint);}}

5.3 水质地图可视化

同样使用CustomPaint自绘地图视图，展示各检测地点的水质评分分布。不同颜色代表不同水质等级，点击可查看详情。

Widget_buildMapView(List<LocationWaterQuality>locations){returnContainer(decoration:BoxDecoration(gradient:LinearGradient(colors:[Colors.blue.shade100,Colors.green.shade100],begin:Alignment.topCenter,end:Alignment.bottomCenter,),),child:CustomPaint(size:Size.infinite,painter:_MapPainter(locations:locations,selectedLocation:_selectedLocation,onLocationTap:(loc)=>setState(()=>_selectedLocation=loc),),),);}

5.4 参数记录表单

记录页面提供完整的表单界面，支持预设地点快速选择、水源类型下拉选择、7项水质参数录入，并内置表单验证和达标自动判断。

void_submitRecord(){if(!_formKey.currentState!.validate())return;finalisCompliant=ph>=6.5&&ph<=8.5&&turbidity<=1.0&&tds<=500&&chlorine>=0.05&&chlorine<=0.3&&hardness<=450&&coliform==0;finalrecord=WaterQualityRecord(id:'WQ${DateTime.now().millisecondsSinceEpoch}',locationName:_locationController.text.trim(),testTime:DateTime.now(),ph:ph,turbidity:turbidity,tds:tds,chlorine:chlorine,hardness:hardness,temperature:temperature,coliform:coliform,waterSource:_waterSource,isCompliant:isCompliant,);_service.addRecord(record);}

六、在鸿蒙设备上运行

6.1 运行环境准备

确保已安装 Flutter for OpenHarmony 开发环境，并配置好鸿蒙设备的连接。本项目使用 DevEco Studio 配合 Flutter 插件进行开发和调试。

6.2 构建与运行

# 进入项目目录cdoh_demo25# 获取依赖flutter pub get# 构建鸿蒙应用flutter build ohos--release# 安装到设备flutterinstallohos

6.3 运行截图

以下为应用在鸿蒙设备上的实际运行截图：

截图一：应用首页 - 水质达标率概览

首页展示水质达标率环形指示器、关键参数概览卡片和最近检测记录列表。

截图二：检测数据图表

折线图展示 pH 值随时间变化趋势，支持切换参数和时间范围。

截图三：水质达标提示

逐项展示各参数与国标的对比情况，达标/超标状态一目了然。

截图四：饮水安全建议

分类展示饮水安全知识，支持按类别筛选和展开查看详情。

截图五：地点水质地图

可视化展示各检测地点的水质评分分布，颜色编码水质等级。

截图六：检测历史管理

按地点和达标状态筛选记录，支持排序和滑动删除。

截图七：水质对比分析

双地点多参数横向对比，自动标注更优方并生成结论。

截图八：报告导出分享

按条件生成检测报告，包含统计概览、摘要和明细记录。

七、项目源码

完整的项目源码已托管在 AtomGit 平台，欢迎访问 https://atomgit.com 获取完整代码。

八、总结

本文基于 Flutter for OpenHarmony 跨平台框架，实现了一款功能完整的饮水水质监测应用。通过本文的实践，我们验证了以下几点：

1. Flutter for OpenHarmony 的成熟度：所有 UI 组件（CustomPaint、CustomScrollView、SliverAppBar 等）在鸿蒙设备上均能正常运行，无需任何平台适配代码。

2. 纯 Dart 实现的可能性：图表和地图功能完全使用 CustomPaint 自绘，未引入任何第三方依赖，避免了鸿蒙适配问题。

3. 跨平台一致性：数据模型、服务层逻辑、UI 布局代码在 Flutter for OpenHarmony 中与标准 Flutter 完全一致，开发者无需学习额外知识。

4. 性能表现：在鸿蒙设备上，列表滚动、图表渲染、表单交互等操作流畅，无明显卡顿。

如果你对 Flutter for OpenHarmony 开发感兴趣，欢迎加入开源鸿蒙跨平台社区（https://openharmonycrossplatform.csdn.net）交流讨论，共同推动 Flutter for OpenHarmony 生态发展。