鸿蒙 ArkUI 进行网络状态监听封装

在鸿蒙应用开发中，监听网络状态的变化是常见的需求，比如在网络断开时提醒用户，或者在网络恢复时执行某些操作。本文将介绍如何使用 ArkUI 进行网络状态监听，并封装成一个易于使用的组件。

1. 使用 @ohos.net.connection 监听网络状态

ArkUI 提供了 @ohos.net.connection 模块用于监听网络状态，我们可以基于它封装一个自定义的 NetworkStatus 组件。

安装依赖

在 ets 文件中使用网络监听模块前，需要先在 config.json 的 "app" 配置项中添加权限：

{
  "module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.GET_NETWORK_INFO"
      }
    ]
  }
}

2. 封装网络状态监听模块

我们可以封装一个 NetworkMonitor 类，用于监听网络状态变化，并通知 UI 进行更新。

import connection from '@ohos.net.connection';

class NetworkMonitor {
  private static instance: NetworkMonitor;
  private callback: ((isConnected: boolean) => void) | null = null;

  private constructor() {}

  static getInstance(): NetworkMonitor {
    if (!NetworkMonitor.instance) {
      NetworkMonitor.instance = new NetworkMonitor();
    }
    return NetworkMonitor.instance;
  }

  public startListening(callback: (isConnected: boolean) => void) {
    this.callback = callback;
    connection.on('netAvailable', () => {
      console.info('网络已连接');
      this.callback?.(true);
    });
    connection.on('netUnavailable', () => {
      console.warn('网络已断开');
      this.callback?.(false);
    });
  }

  public stopListening() {
    connection.off('netAvailable');
    connection.off('netUnavailable');
    this.callback = null;
  }
}

3. 在 ArkUI 组件中使用网络监听

现在，我们可以在 ArkUI 组件中使用 NetworkMonitor，并动态更新 UI。

import { NetworkMonitor } from './NetworkMonitor';

@Entry
@Component
struct NetworkStatusDemo {
  @State isConnected: boolean = true;

  aboutToAppear() {
    NetworkMonitor.getInstance().startListening((status: boolean) => {
      this.isConnected = status;
    });
  }

  aboutToDisappear() {
    NetworkMonitor.getInstance().stopListening();
  }

  build() {
    Column({ space: 10 }) {
      Text(this.isConnected ? '网络连接正常' : '网络已断开')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .padding(10)
    }.padding(20);
  }
}

4. 运行效果

当网络连接或断开时，页面会实时更新状态：

• 连接正常时，显示 网络连接正常
• 断开网络时，显示 网络已断开

5. 总结

本文介绍了如何使用 ArkUI 监听网络状态，并封装成一个可复用的 NetworkMonitor 组件。这样在应用中，我们可以在多个页面中方便地使用网络监听功能，提升用户体验。