构建网络感知应用：Flutter connectivity_plus 在鸿蒙端的流式架构实践

前言

一个卓越的应用，必须像拥有"触觉"一样感知外部世界。在移动互联时代，网络状态的波动是极致体验的头号敌人：如何在高频移动场景（如高铁切换基站）避免图片加载失败？如何在用户进入室外失去 Wi-Fi 时及时提醒其正在通过 5G 消耗流量？

connectivity_plus 是 Flutter 开发中最常用的网络感知插件。本文将带你实战如何在 HarmonyOS NEXT 系统上通过该插件实现精准的网络状态监听。

💡 鸿蒙适配说明：本示例使用社区提供的 connectivity_plus_ohos 插件来实现鸿蒙平台的网络状态监听功能。

---

一、 网络感知在鸿蒙生态中的意义

鸿蒙系统（OpenHarmony）支持全场景分布式能力：应用可能在手机、手表、甚至是车载中控上运行。不同设备的网络接入方式（Wi-Fi、蜂窝、以太网、低功耗蓝牙代理）完全不同。connectivity_plus 为这些复杂的网络环境提供了一层完美的抽象。

---

二、 工程配置

2.1 添加依赖

dependencies:
  connectivity_plus: 5.0.2
  connectivity_plus_ohos: any  # 鸿蒙平台适配插件

💡 说明：connectivity_plus_ohos 是社区维护的鸿蒙适配插件，提供了与标准 connectivity_plus API 一致的接口。

2.2 鸿蒙权限声明

网络感知插件需要调用鸿蒙底层的 Network Manager 权限。请在 ohos/entry/src/main/module.json5 中确保包含以下申明：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.GET_NETWORK_INFO" // ✅ 鸿蒙网络状态获取核心权限
      }
    ]
  }
}

---

三、 核心用法深度剖析

3.1 一次性状态查询

适用于页面刚打开时，确定当前网络环境以调整首屏加载策略。

import 'package:connectivity_plus/connectivity_plus.dart';

Future<void> _checkCurrentStatus() async {
  final ConnectivityResult connectivityResult = await Connectivity().checkConnectivity();

  if (connectivityResult == ConnectivityResult.mobile) {
    // 💡 流量环境下建议降低图片质量，节省鸿蒙 5G 流量
    print('正在使用蜂窝网络');
  } else if (connectivityResult == ConnectivityResult.wifi) {
    print('正在使用 Wi-Fi');
  } else if (connectivityResult == ConnectivityResult.none) {
    print('断网状态，进入离线模式');
  }
}

3.2 响应式流监听 (Streaming)

这是最推荐的做法，能让你的 App “随网而动”。

late StreamSubscription<ConnectivityResult> subscription;

@override
initState() {
  super.initState();
  // 订阅网络状态变更流
  subscription = Connectivity().onConnectivityChanged.listen((result) {
    if (result == ConnectivityResult.none) {
      _showNoNetworkDialog(); // 弹出断网提醒
    }
  });
}

@override
dispose() {
  subscription.cancel(); // ⚡️ 必做：防止鸿蒙应用进入后台后的内存泄漏
  super.dispose();
}

---

四、 鸿蒙环境下的进阶处理

4.1 离线 UI 降级策略

在鸿蒙上实现“极致丝滑”，应在检测到 ConnectivityResult.none 时，自动切换 UI 到离线占位图或展示缓存数据，而不是显示原生的 404 错误页面。

4.2 适配软总线与分布式网络

当鸿蒙设备通过 软总线（SoftBus） 共享其他设备的网络时，connectivity_plus 会将其识别为 ethernet 或特殊的 Wi-Fi 模式。

• ✅ 建议：构建全局 EnvironmentProvider 来统一分发网络状态。

---

五、 完整 Demo：状态感知 Banner

class ConnectivityAwareBanner extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<ConnectivityResult>(
      stream: Connectivity().onConnectivityChanged,
      builder: (context, snapshot) {
        final result = snapshot.data;
        if (result == ConnectivityResult.none) {
          return Container(
            color: Colors.redAccent,
            width: double.infinity,
            padding: const EdgeInsets.symmetric(vertical: 8),
            child: const Text('⚠️ 当前无网络连接，请检查鸿蒙系统设置', textAlign: TextAlign.center),
          );
        }
        return const SizedBox.shrink();
      },
    );
  }
}

---

六、 总结

connectivity_plus 为鸿蒙 Flutter 应用带来了敏捷的感知力：

1. 用户体验起飞：及时应对网络变化，减少卡顿感。
2. 流量成本控制：精准区分 Wi-Fi 与蜂窝网络。
3. 开发简单：标准的 Stream 模式，代码优雅且易于维护。

---

🌐 欢迎加入开源鸿蒙跨平台社区：开源鸿蒙跨平台开发者社区