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

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

作者：maaath

一、引言

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

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

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

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

二、应用功能概览

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

功能模块	说明
水质参数记录	录入 pH、浊度、TDS、余氯、硬度、水温、大肠菌群等参数
检测数据图表	折线图展示参数变化趋势，支持多参数切换和时间范围筛选
水质达标提示	对照国家标准逐项展示达标情况
饮水安全建议	分类展示饮水安全知识，按优先级排序
地点水质地图	可视化展示各检测地点的水质评分
检测历史管理	按地点、状态筛选，支持排序和删除
水质对比分析	双地点多参数横向对比
报告导出分享	生成检测报告并分享

三、数据模型设计

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

class WaterQualityRecord {
  final String id;
  final String locationName;
  final double latitude;
  final double longitude;
  final DateTime testTime;
  final double ph;
  final double turbidity;
  final double tds;
  final double chlorine;
  final double hardness;
  final double temperature;
  final double coliform;
  final String waterSource;
  final String notes;
  final bool isCompliant;

  WaterQualityRecord({
    required this.id,
    required this.locationName,
    required this.latitude,
    required this.longitude,
    required this.testTime,
    required this.ph,
    required this.turbidity,
    required this.tds,
    required this.chlorine,
    required this.hardness,
    required this.temperature,
    required this.coliform,
    required this.waterSource,
    this.notes = '',
    required this.isCompliant,
  });
}

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

四、服务层实现

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

class WaterQualityService {
  static final WaterQualityService _instance = WaterQualityService._();
  factory WaterQualityService() => _instance;
  WaterQualityService._();

  final List<WaterQualityRecord> _records = [];
  final List<LocationWaterQuality> _locations = [];
  final List<SafetyAdvice> _advices = [];
  final List<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(WaterQualityRecord r) {
    return r.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) {
  final color = complianceRate >= 90
      ? Colors.green
      : complianceRate >= 70
          ? Colors.orange
          : Colors.red;

  return Container(
    padding: const EdgeInsets.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: const TextStyle(
                color: Colors.white,
                fontSize: 22,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
        const SizedBox(width: 20),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text('水质达标率',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              Text(
                complianceRate >= 90
                    ? '水质优良，请放心饮用'
                    : complianceRate >= 70
                        ? '水质一般，建议关注'
                        : '水质较差，需要改善',
                style: const TextStyle(color: Colors.white70, fontSize: 14),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

5.2 自绘折线图

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

class _LineChartPainter extends CustomPainter {
  final List<WaterQualityRecord> records;
  final String parameter;
  final Color lineColor;

  @override
  void paint(Canvas canvas, Size size) {
    // 提取参数值
    final values = records.map((r) {
      switch (parameter) {
        case 'pH值': return r.ph;
        case '浊度': return r.turbidity;
        case 'TDS': return r.tds;
        case '余氯': return r.chlorine;
        case '总硬度': return r.hardness;
        default: return 0.0;
      }
    }).toList();

    // 计算坐标映射
    final maxVal = values.reduce((a, b) => a > b ? a : b);
    final minVal = values.reduce((a, b) => a < b ? a : b);
    final chartRange = (maxVal - minVal) * 1.2;

    // 绘制贝塞尔曲线
    final path = Path();
    path.moveTo(points.first.dx, points.first.dy);
    for (int i = 1; i < points.length; i++) {
      final prev = points[i - 1];
      final curr = points[i];
      final cp1 = Offset(
        prev.dx + (curr.dx - prev.dx) / 3, prev.dy,
      );
      final cp2 = 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) {
  return Container(
    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;

  final isCompliant = ph >= 6.5 && ph <= 8.5 &&
      turbidity <= 1.0 && tds <= 500 &&
      chlorine >= 0.05 && chlorine <= 0.3 &&
      hardness <= 450 && coliform == 0;

  final record = 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 构建与运行

# 进入项目目录
cd oh_demo25

# 获取依赖
flutter pub get

# 构建鸿蒙应用
flutter build ohos --release

# 安装到设备
flutter install ohos

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 生态发展。