Connective

简介

Nylo Website 提供了网络感知组件和实用工具，帮助您构建响应网络变化的应用。Connective 组件在连接状态改变时自动重建，而 NyConnectivity 辅助类提供了检查连接状态的静态方法。

Connective 组件

Connective 组件监听连接变化，并根据当前网络状态重建。

基于状态的构建器

为每种连接类型提供不同的组件：

Connective(
  onWifi: Text('Connected via WiFi'),
  onMobile: Text('Connected via Mobile Data'),
  onNone: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.wifi_off, size: 64),
      Text('No internet connection'),
    ],
  ),
  child: Text('Connected'), // Default for unspecified states
)

可用状态

自定义构建器

使用 Connective.builder 完全控制 UI：

Connective.builder(
  builder: (context, state, results) {
    if (state == NyConnectivityState.none) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.cloud_off, size: 64, color: Colors.grey),
            SizedBox(height: 16),
            Text('You are offline'),
            ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: Text('Go Back'),
            ),
          ],
        ),
      );
    }

    // Show connection type
    return Text('Connected via: ${state.name}');
  },
)

构建器接收：

• context - BuildContext
• state - NyConnectivityState 枚举（wifi、mobile、ethernet、vpn、bluetooth、other、none）
• results - List<ConnectivityResult>，用于检查多个连接

监听变化

使用 onConnectivityChanged 在连接状态变化时作出响应：

Connective(
  onConnectivityChanged: (state, results) {
    if (state == NyConnectivityState.none) {
      showSnackbar('You went offline');
    } else {
      showSnackbar('Back online!');
    }
  },
  child: MyContent(),
)

OfflineBanner 组件

在离线时在屏幕顶部显示横幅：

Scaffold(
  body: Stack(
    children: [
      // Your main content
      MyPageContent(),

      // Offline banner (auto-hides when online)
      OfflineBanner(),
    ],
  ),
)

自定义横幅

OfflineBanner(
  message: 'Check your connection',
  backgroundColor: Colors.orange,
  textColor: Colors.white,
  icon: Icons.signal_wifi_off,
  height: 50,
  animate: true, // Slide in/out animation
  animationDuration: Duration(milliseconds: 200),
)

NyConnectivity 辅助类

NyConnectivity 类提供了检查连接状态的静态方法：

检查在线/离线状态

if (await NyConnectivity.isOnline()) {
  // Make API request
  final data = await api.fetchData();
} else {
  // Load from cache
  final data = await cache.getData();
}

// Or check if offline
if (await NyConnectivity.isOffline()) {
  showOfflineMessage();
}

检查特定连接类型

if (await NyConnectivity.isWifi()) {
  // Download large files on WiFi
  await downloadLargeFile();
}

if (await NyConnectivity.isMobile()) {
  // Warn about data usage
  showDataWarning();
}

// Other methods:
await NyConnectivity.isEthernet();
await NyConnectivity.isVpn();
await NyConnectivity.isBluetooth();

获取当前状态

// Get all active connection types
List<ConnectivityResult> results = await NyConnectivity.status();

if (results.contains(ConnectivityResult.wifi)) {
  print('WiFi is active');
}

// Get human-readable string
String type = await NyConnectivity.connectionTypeString();
print('Connected via: $type'); // "WiFi", "Mobile", "None", etc.

监听变化

StreamSubscription subscription = NyConnectivity.stream().listen((results) {
  if (results.contains(ConnectivityResult.none)) {
    showOfflineUI();
  } else {
    showOnlineUI();
  }
});

// Don't forget to cancel when done
@override
void dispose() {
  subscription.cancel();
  super.dispose();
}

条件执行

// Execute only when online (returns null if offline)
final data = await NyConnectivity.whenOnline(() async {
  return await api.fetchData();
});

if (data == null) {
  showOfflineMessage();
}

// Execute different callbacks based on status
final result = await NyConnectivity.when(
  online: () async => await api.fetchData(),
  offline: () async => await cache.getData(),
);

组件扩展

快速为任何组件添加网络感知功能：

显示离线替代方案

// Show a different widget when offline
MyContent().connectiveOr(
  offline: Text('Content unavailable offline'),
)

仅在线时显示

// Hide completely when offline
SyncButton().onlyOnline()

仅在离线时显示

// Show only when offline
OfflineMessage().onlyOffline()

参数

Connective

OfflineBanner

NyConnectivityState 枚举