Flutter 鸿蒙网络状态监测实现：状态监听与类型判断

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

效果展示

网络状态监测演示

实时状态显示

• 显示当前连接状态（已连接/未连接）
• 显示网络类型（WiFi/移动数据/以太网）
• 显示网络速度（优秀/良好/无连接）
• 状态变化实时更新

网络切换模拟

• 支持模拟不同网络类型
• 支持模拟断网重连
• 实时记录状态变更历史
• 清晰的状态变化日志

状态变更历史

历史记录

• 记录每次状态变更时间
• 记录状态变更详情
• 支持清空历史记录
• 最多保留20条记录

实现步骤

1. 网络状态监听

状态监听器

class NetworkStatusMonitor {
  StreamSubscription? _subscription;
  bool _isConnected = false;
  String _connectionType = '无网络';
  
  void startMonitoring() {
    _subscription = Connectivity()
      .onConnectivityChanged
      .listen((result) {
        _handleNetworkChange(result);
      });
  }
  
  void _handleNetworkChange(ConnectivityResult result) {
    _isConnected = result != ConnectivityResult.none;
    _connectionType = _getNetworkType(result);
    notifyListeners();
  }
  
  void stopMonitoring() {
    _subscription?.cancel();
  }
}

2. 网络类型判断

类型识别

String getNetworkType(ConnectivityResult result) {
  switch (result) {
    case ConnectivityResult.wifi:
      return 'WiFi';
    case ConnectivityResult.mobile:
      return '移动数据';
    case ConnectivityResult.ethernet:
      return '以太网';
    case ConnectivityResult.bluetooth:
      return '蓝牙';
    case ConnectivityResult.vpn:
      return 'VPN';
    case ConnectivityResult.none:
    default:
      return '无网络';
  }
}

3. 网络速度检测

速度评估

String getNetworkSpeed(String type) {
  switch (type) {
    case 'WiFi':
      return '优秀';
    case '移动数据':
      return '良好';
    case '以太网':
      return '极佳';
    default:
      return '无连接';
  }
}

4. 状态历史记录

历史管理

class NetworkStatusHistory {
  final List<String> _history = [];
  
  void addRecord(String message) {
    final timestamp = DateTime.now().toString().substring(11, 19);
    _history.insert(0, '[$timestamp] $message');
    
    if (_history.length > 20) {
      _history.removeLast();
    }
  }
  
  List<String> getHistory() {
    return List.from(_history);
  }
  
  void clear() {
    _history.clear();
  }
}

功能特性

1. 实时监测

状态监听

• 自动监听网络变化
• 实时更新UI显示
• 无需手动刷新
• 低功耗设计

多网络类型支持

• WiFi网络识别
• 移动数据识别
• 以太网识别
• 蓝牙网络识别

2. 状态显示

连接状态

Widget buildConnectionStatus() {
  return Container(
    decoration: BoxDecoration(
      color: isConnected ? Colors.green.shade50 : Colors.red.shade50,
      borderRadius: BorderRadius.circular(12),
    ),
    child: Row(
      children: [
        Icon(
          isConnected ? Icons.wifi : Icons.wifi_off,
          color: isConnected ? Colors.green : Colors.red,
        ),
        Text(isConnected ? '已连接' : '未连接'),
      ],
    ),
  );
}

3. 网络切换模拟

模拟功能

void simulateNetworkChange(String type) {
  setState(() {
    connectionType = type;
    isConnected = type != '无网络';
    networkSpeed = getNetworkSpeed(type);
  });
  
  addStatusHistory('网络类型变更为: $type');
}

void simulateDisconnect() {
  setState(() {
    isConnected = false;
    connectionType = '无网络';
    networkSpeed = '无连接';
  });
  addStatusHistory('网络连接已断开');
}

void simulateReconnect() {
  setState(() {
    isConnected = true;
    connectionType = 'WiFi';
    networkSpeed = '良好';
  });
  addStatusHistory('网络连接已恢复');
}

使用说明

基本使用

1. 查看当前状态

   • 打开页面自动显示当前网络状态
   • 显示连接状态、网络类型、速度

2. 模拟网络切换

   • 点击不同网络类型卡片
   • 观察状态变化
   • 查看历史记录

3. 模拟断网重连

   • 点击"模拟断网"按钮
   • 观察断网状态
   • 点击"模拟重连"恢复

高级功能

状态历史查看

ListView.builder(
  itemCount: history.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.circle, size: 8),
      title: Text(history[index]),
    );
  },
)

清空历史

TextButton(
  onPressed: () {
    setState(() {
      history.clear();
    });
  },
  child: Text('清空'),
)

技术要点

1. 状态监听机制

Stream监听

• 使用StreamSubscription监听
• 自动处理生命周期
• 及时释放资源
• 避免内存泄漏

状态管理

• 使用StatefulWidget管理状态
• 及时通知UI更新
• 保持状态一致性

2. 网络类型识别

平台差异处理

• Android/iOS平台适配
• OpenHarmony平台适配
• 统一的类型定义
• 平台特性兼容

3. 性能优化

监听优化

• 避免频繁状态更新
• 使用防抖机制
• 合理的资源释放
• 低功耗设计

最佳实践

1. 监听生命周期

正确启动和停止

@override
void initState() {
  super.initState();
  networkMonitor.startMonitoring();
}

@override
void dispose() {
  networkMonitor.stopMonitoring();
  super.dispose();
}

2. 错误处理

权限处理

Future<void> requestPermission() async {
  final status = await Permission.networkState.request();
  if (!status.isGranted) {
    // 处理权限拒绝
  }
}

3. 用户体验

友好提示

• 状态变化时显示提示
• 网络异常时给出建议
• 提供手动刷新选项
• 清晰的状态图标

应用场景

1. 应用启动检查

网络检查

Future<void> checkNetworkOnStartup() async {
  final isConnected = await networkMonitor.isConnected();
  if (!isConnected) {
    showNetworkErrorDialog();
  }
}

2. 数据加载优化

根据网络状态加载

Future<void> loadData() async {
  final networkType = networkMonitor.connectionType;
  
  if (networkType == 'WiFi') {
    // 加载高清图片
    await loadHighQualityImages();
  } else if (networkType == '移动数据') {
    // 加载缩略图
    await loadThumbnails();
  }
}

3. 离线模式切换

自动切换

void onNetworkChanged(bool isConnected) {
  if (!isConnected) {
    // 切换到离线模式
    enableOfflineMode();
  } else {
    // 恢复在线模式
    disableOfflineMode();
  }
}

总结

Flutter鸿蒙网络状态监测功能实现了完整的网络状态管理方案，包括：

• ✅ 实时网络状态监听
• ✅ 多种网络类型识别
• ✅ 网络速度评估
• ✅ 状态变更历史记录
• ✅ 网络切换模拟功能

该功能为Flutter for OpenHarmony应用提供了可靠的网络状态监测能力，适用于各种需要网络感知的应用场景。