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

Flutter 三方库 connectivity_plus 鸿蒙化网络状态监测实战

摘要

connectivity_plus 是 Flutter 生态中用于检测网络连接状态的常用插件，支持监测 Wi-Fi、移动网络和以太网等连接类型。本文基于 OpenHarmony TPC 仓库的适配版本，详细讲解 connectivity_plus 在鸿蒙项目中的接入流程、权限配置、核心 API 使用及常见问题排查，并附真实设备运行截图验证。

核心要点：

• 掌握网络状态监听与检测 API
• 配置必要的网络权限
• 实现网络状态变化的应用响应

一、网络状态监测架构

二、参考来源

三、接入步骤

3.1 配置 pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  
  connectivity_plus:
    git:
      url: https://atomgit.com/openharmony-tpc/flutter_packages.git
      path: packages/connectivity_plus/connectivity_plus

3.2 核心代码示例

import 'package:connectivity_plus/connectivity_plus.dart';

class NetworkService {
  final Connectivity _connectivity = Connectivity();

  // 检查当前网络连接状态
  Future<List<ConnectivityResult>> checkNetworkStatus() async {
    return await _connectivity.checkConnectivity();
  }

  // 监听网络状态变化
  Stream<List<ConnectivityResult>> watchNetworkStatus() {
    return _connectivity.onConnectivityChanged;
  }

  // 判断是否有网络连接
  Future<bool> isNetworkAvailable() async {
    final results = await checkNetworkStatus();
    return results.isNotEmpty && 
           !results.contains(ConnectivityResult.none);
  }

  // 获取网络类型描述
  String getNetworkTypeName(List<ConnectivityResult> results) {
    if (results.contains(ConnectivityResult.wifi)) {
      return 'Wi-Fi';
    } else if (results.contains(ConnectivityResult.mobile)) {
      return '移动网络';
    } else if (results.contains(ConnectivityResult.ethernet)) {
      return '以太网';
    } else {
      return '无网络连接';
    }
  }
}

3.3 完整使用示例

import 'package:flutter/material.dart';
import 'package:connectivity_plus/connectivity_plus.dart';

class NetworkDemo extends StatefulWidget {
  @override
  _NetworkDemoState createState() => _NetworkDemoState();
}

class _NetworkDemoState extends State<NetworkDemo> {
  final NetworkService _networkService = NetworkService();
  List<ConnectivityResult> _currentStatus = [];
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _initNetworkStatus();
    _watchNetworkChanges();
  }

  Future<void> _initNetworkStatus() async {
    final status = await _networkService.checkNetworkStatus();
    if (mounted) {
      setState(() {
        _currentStatus = status;
        _isLoading = false;
      });
    }
  }

  void _watchNetworkChanges() {
    _networkService.watchNetworkStatus().listen((results) {
      if (mounted) {
        setState(() {
          _currentStatus = results;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network Status Demo'),
      ),
      body: _isLoading
          ? Center(child: CircularProgressIndicator())
          : Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    _getNetworkIcon(),
                    size: 80,
                    color: _getNetworkColor(),
                  ),
                  SizedBox(height: 20),
                  Text(
                    _networkService.getNetworkTypeName(_currentStatus),
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(height: 10),
                  Text(
                    '当前网络状态',
                    style: TextStyle(color: Colors.grey),
                  ),
                ],
              ),
            ),
    );
  }

  IconData _getNetworkIcon() {
    if (_currentStatus.contains(ConnectivityResult.wifi)) {
      return Icons.wifi;
    } else if (_currentStatus.contains(ConnectivityResult.mobile)) {
      return Icons.signal_cellular_4_bar;
    } else if (_currentStatus.contains(ConnectivityResult.ethernet)) {
      return Icons.settings_ethernet;
    } else {
      return Icons.signal_wifi_off;
    }
  }

  Color _getNetworkColor() {
    if (_currentStatus.contains(ConnectivityResult.none)) {
      return Colors.red;
    }
    return Colors.green;
  }
}

四、验证步骤

五、常见问题排查

六、运行成功截图

七、总结

connectivity_plus 是监测网络状态的基础插件，在 OpenHarmony 平台上的适配完善。通过监听网络状态变化，应用可以实现网络自适应、离线提示等功能，是构建可靠网络应用的重要工具。

附录：Schema.org 结构化数据

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Flutter 三方库 connectivity_plus 鸿蒙化网络状态监测实战",
  "description": "基于 OpenHarmony TPC 仓库，详细讲解 connectivity_plus 在鸿蒙项目中的接入流程、网络状态检测与监听功能实现。",
  "author": { "@type": "Person", "name": "OpenHarmony 跨平台开发者" },
  "publisher": { "@type": "Organization", "name": "OpenHarmony 跨平台社区", "url": "https://openharmonycrossplatform.csdn.net" },
  "datePublished": "2026-05-07",
  "dateModified": "2026-05-07",
  "mainEntityOfPage": "https://openharmonycrossplatform.csdn.net",
  "keywords": ["开源鸿蒙", "OpenHarmony", "Flutter for OpenHarmony", "connectivity_plus", "网络状态", "三方库适配"],
  "inLanguage": "zh-CN"
}
</script>