WiFi详情页面展示当前连接的WiFi网络的详细信息，包括网络名称、信号强度、IP地址、网关等技术参数，以及该WiFi下的流量使用统计。
请添加图片描述

功能设计

WiFi详情页面需要展示：

  • WiFi基本信息（SSID、信号强度）
  • 今日WiFi流量使用量
  • 网络技术参数（频段、IP、网关、DNS）
  • WiFi连接历史
  • 网络质量指标

页面整体结构

首先定义WiFi详情页面的基本框架：

class WifiDetailView extends GetView<WifiDetailController> {
  const WifiDetailView({super.key});

  @override
  Widget build(BuildContext context) {

继承GetView自动注入WifiDetailController。
const构造函数优化widget重建性能。
build方法返回页面的完整UI结构。

    return Scaffold(
      backgroundColor: AppTheme.backgroundColor,
      appBar: AppBar(
        title: const Text('WiFi详情'),
        actions: [
          IconButton(

Scaffold提供Material Design页面框架。
统一背景色保持视觉一致性。
AppBar设置页面标题为"WiFi详情"。

            icon: Icon(Icons.refresh),
            onPressed: () => controller.refreshInfo(),
          ),
        ],
      ),
      body: SingleChildScrollView(

refresh按钮重新获取最新网络信息。
对于信号不稳定的场景很有用。
SingleChildScrollView让内容可滚动。

        padding: EdgeInsets.all(16.w),
        child: Column(
          children: [
            _buildHeader(),
            SizedBox(height: 16.h),

统一的内边距让内容不贴边。
Column垂直排列四个卡片区域。
16.h的间距让各区域视觉分隔清晰。

            _buildUsageCard(),
            SizedBox(height: 16.h),
            _buildInfoCard(),
            SizedBox(height: 16.h),
            _buildQualityCard(),
          ],
        ),
      ),
    );
  }
}

四个区域：头部信息、流量统计、网络参数、网络质量。
每个区域封装成独立方法便于维护。
闭合所有括号完成页面结构。

WiFi信息头部

头部展示WiFi名称和信号强度等核心信息：

Widget _buildHeader() {
  return Container(
    padding: EdgeInsets.all(24.w),
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,

Container作为头部卡片的容器。
24.w的内边距让内容更宽松。
LinearGradient创建渐变背景。

        colors: [AppTheme.wifiColor, AppTheme.wifiColor.withOpacity(0.7)],
      ),
      borderRadius: BorderRadius.circular(20.r),
      boxShadow: [
        BoxShadow(
          color: AppTheme.wifiColor.withOpacity(0.3),

从WiFi主色到其0.7透明度版本渐变。
20.r大圆角让卡片更圆润。
阴影颜色与卡片颜色一致。

          blurRadius: 15.r,
          offset: Offset(0, 8.h),
        ),
      ],
    ),
    child: Column(
      children: [
        _buildWifiIcon(),

较大的模糊半径让阴影更柔和。
阴影向下偏移8.h模拟光照效果。
Column垂直排列头部内容。

        SizedBox(height: 16.h),
        _buildWifiName(),
        SizedBox(height: 8.h),
        _buildSignalInfo(),
        SizedBox(height: 20.h),
        _buildTodayUsage(),
      ],
    ),
  );
}

WiFi图标、名称、信号信息、今日使用量依次排列。
不同的间距让内容层次分明。
_buildTodayUsage显示今日流量使用。

WiFi图标组件

显示WiFi信号强度的图标和百分比：

Widget _buildWifiIcon() {
  return Obx(() {
    final strength = controller.signalStrength.value;
    return Container(
      width: 80.w,
      height: 80.w,

Obx监听signalStrength实现响应式更新。
80.w的尺寸让图标足够醒目。
Container作为图标的容器。

      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.2),
        shape: BoxShape.circle,
      ),
      child: Stack(
        alignment: Alignment.center,

半透明白色背景与渐变卡片协调。
BoxShape.circle创建圆形容器。
Stack叠加图标和百分比徽章。

        children: [
          Icon(Icons.wifi, size: 48.sp, color: Colors.white),
          Positioned(
            bottom: 8.h,
            child: Container(

WiFi图标居中显示。
Positioned定位百分比徽章在底部。
bottom: 8.h让徽章稍微上移。

              padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 2.h),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10.r),
              ),

白色背景让徽章突出显示。
小内边距让徽章紧凑。
10.r圆角让徽章更圆润。

              child: Text(
                '$strength%',
                style: TextStyle(
                  fontSize: 10.sp,
                  fontWeight: FontWeight.bold,
                  color: AppTheme.wifiColor,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  });
}

显示信号强度百分比。
10.sp小字号适合徽章。
WiFi主色让文字与卡片协调。

WiFi名称和信号信息

显示WiFi名称和信号等级：

Widget _buildWifiName() {
  return Obx(() => Text(
    controller.ssid.value,
    style: TextStyle(
      fontSize: 22.sp,
      fontWeight: FontWeight.bold,
      color: Colors.white,
    ),
  ));
}

Obx监听ssid变量实现响应式更新。
22.sp大字号突出显示WiFi名称。
白色文字与渐变背景对比明显。

Widget _buildSignalInfo() {
  return Obx(() {
    final strength = controller.signalStrength.value;
    String level;
    if (strength >= 80) {
      level = '信号极好';

Obx监听signalStrength。
根据信号强度计算等级描述。
80%以上为"极好"。

    } else if (strength >= 60) {
      level = '信号良好';
    } else if (strength >= 40) {
      level = '信号一般';
    } else {
      level = '信号较弱';
    }

60-80%为"良好"。
40-60%为"一般"。
40%以下为"较弱"。

    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(Icons.signal_wifi_4_bar, size: 16.sp, color: Colors.white70),
        SizedBox(width: 4.w),

Row居中排列图标和文字。
WiFi信号图标表示信号相关。
白色70%透明度作为次要信息。

        Text(
          '$level · ${controller.frequency.value}',
          style: TextStyle(fontSize: 14.sp, color: Colors.white70),
        ),
      ],
    );
  });
}

显示信号等级和频段信息。
点号分隔两部分信息。
频段如"5GHz"帮助用户了解连接类型。

今日使用量

显示今日WiFi流量使用量：

Widget _buildTodayUsage() {
  return Container(
    padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 12.h),
    decoration: BoxDecoration(
      color: Colors.white.withOpacity(0.15),
      borderRadius: BorderRadius.circular(12.r),
    ),

Container包裹今日使用量信息。
半透明白色背景与卡片协调。
12.r圆角保持视觉一致。

    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.data_usage, size: 20.sp, color: Colors.white),
        SizedBox(width: 8.w),

Row横向排列图标和文字。
mainAxisSize.min让容器宽度自适应。
data_usage图标表示流量使用。

        Text('今日使用: ', style: TextStyle(fontSize: 14.sp, color: Colors.white70)),
        Obx(() => Text(
          controller.formatBytes(controller.todayUsage.value),
          style: TextStyle(
            fontSize: 18.sp,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        )),
      ],
    ),
  );
}

标签用白色70%透明度。
数值用18.sp大字号加粗突出。
formatBytes格式化字节数为可读字符串。

流量使用卡片

展示本周和本月的WiFi流量统计：

Widget _buildUsageCard() {
  return Container(
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(16.r),
    ),

白色背景卡片与页面灰色背景对比。
16.w内边距让内容不贴边。
16.r圆角保持视觉一致。

    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'WiFi流量统计',
          style: TextStyle(
            fontSize: 16.sp,
            fontWeight: FontWeight.w600,
            color: AppTheme.textPrimary,
          ),
        ),

Column垂直排列标题和内容。
标题用16.sp字号，w600加粗。
crossAxisAlignment让标题左对齐。

        SizedBox(height: 16.h),
        Row(
          children: [
            Expanded(child: _buildUsageItem('本周', controller.weekUsage, AppTheme.wifiColor)),
            Container(width: 1, height: 50.h, color: Colors.grey.shade200),
            Expanded(child: _buildUsageItem('本月', controller.monthUsage, AppTheme.primaryColor)),
          ],
        ),
      ],
    ),
  );
}

Row横向排列本周和本月统计。
中间用竖线分隔。
Expanded让两边平分宽度。

使用量项组件

单个使用量统计项：

Widget _buildUsageItem(String label, RxInt usage, Color color) {
  return Column(
    children: [
      Text(label, style: TextStyle(fontSize: 13.sp, color: AppTheme.textSecondary)),
      SizedBox(height: 8.h),

接收标签、使用量和颜色三个参数。
Column垂直排列标签和数值。
标签用13.sp小字号，次要颜色。

      Obx(() => Text(
        controller.formatBytes(usage.value),
        style: TextStyle(
          fontSize: 18.sp,
          fontWeight: FontWeight.bold,
          color: color,
        ),
      )),
    ],
  );
}

Obx监听usage实现响应式更新。
数值用18.sp大字号加粗。
颜色参数让不同项有不同颜色。

网络参数卡片

展示WiFi的技术参数：

Widget _buildInfoCard() {
  return Container(
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(16.r),
    ),

白色背景卡片。
16.w内边距让内容不贴边。
16.r圆角保持视觉一致。

    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              '网络参数',

Column垂直排列标题和参数列表。
Row两端对齐标题和复制按钮。
标题"网络参数"说明区域内容。

              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w600,
                color: AppTheme.textPrimary,
              ),
            ),
            IconButton(
              icon: Icon(Icons.copy, size: 20.sp, color: AppTheme.textSecondary),
              onPressed: () => _copyNetworkInfo(),
            ),
          ],
        ),

标题用16.sp字号，w600加粗。
复制按钮方便用户复制网络参数。
点击调用_copyNetworkInfo方法。

        SizedBox(height: 8.h),
        _buildInfoRow('频段', controller.frequency),
        _buildInfoRow('IP地址', controller.ipAddress),
        _buildInfoRow('子网掩码', controller.subnetMask),

间距8.h后显示参数列表。
_buildInfoRow构建单行参数。
频段、IP地址、子网掩码依次显示。

        _buildInfoRow('网关', controller.gateway),
        _buildInfoRow('DNS', controller.dns),
        _buildInfoRow('MAC地址', controller.macAddress),
      ],
    ),
  );
}

网关、DNS、MAC地址继续显示。
六个参数覆盖常用的网络信息。
方便用户排查网络问题。

参数行组件

单行网络参数的显示：

Widget _buildInfoRow(String label, RxString value) {
  return Padding(
    padding: EdgeInsets.symmetric(vertical: 10.h),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,

Padding添加垂直间距。
Row两端对齐标签和数值。
spaceBetween让两端对齐。

      children: [
        Text(
          label,
          style: TextStyle(fontSize: 14.sp, color: AppTheme.textSecondary),
        ),
        Obx(() => Text(
          value.value,

标签用14.sp字号，次要颜色。
Obx监听value实现响应式更新。
显示参数的实际值。

          style: TextStyle(
            fontSize: 14.sp,
            fontWeight: FontWeight.w500,
            color: AppTheme.textPrimary,
          ),
        )),
      ],
    ),
  );
}

数值用14.sp字号，w500稍微加粗。
主要文字颜色确保可读性。
整体布局清晰直观。

复制网络信息

一键复制所有网络参数：

void _copyNetworkInfo() {
  final info = '''
SSID: ${controller.ssid.value}
IP地址: ${controller.ipAddress.value}
网关: ${controller.gateway.value}
DNS: ${controller.dns.value}
''';
  Get.snackbar('已复制', '网络信息已复制到剪贴板');
}

拼接所有参数为文本格式。
多行字符串使用三引号。
复制后显示snackbar提示用户。

网络质量卡片

展示网络质量指标：

Widget _buildQualityCard() {
  return Container(
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(16.r),
    ),

白色背景卡片。
16.w内边距让内容不贴边。
16.r圆角保持视觉一致。

    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '网络质量',
          style: TextStyle(
            fontSize: 16.sp,
            fontWeight: FontWeight.w600,
            color: AppTheme.textPrimary,
          ),
        ),

Column垂直排列标题和内容。
标题用16.sp字号，w600加粗。
crossAxisAlignment让标题左对齐。

        SizedBox(height: 16.h),
        Row(
          children: [
            Expanded(child: _buildQualityItem('延迟', '${controller.latency.value}ms', _getLatencyColor())),
            Expanded(child: _buildQualityItem('下载', '${controller.downloadSpeed.value} MB/s', AppTheme.wifiColor)),
            Expanded(child: _buildQualityItem('上传', '${controller.uploadSpeed.value} MB/s', AppTheme.primaryColor)),
          ],
        ),

Row横向排列三个质量指标。
延迟、下载速度、上传速度。
Expanded让三项平分宽度。

        SizedBox(height: 16.h),
        _buildQualityBar(),
      ],
    ),
  );
}

间距16.h后显示综合评分进度条。
_buildQualityBar构建进度条。
整体展示网络质量状况。

质量项组件

单个质量指标的显示：

Widget _buildQualityItem(String label, String value, Color color) {
  return Column(
    children: [
      Text(label, style: TextStyle(fontSize: 12.sp, color: AppTheme.textSecondary)),
      SizedBox(height: 6.h),

接收标签、数值和颜色三个参数。
Column垂直排列标签和数值。
标签用12.sp小字号。

      Text(
        value,
        style: TextStyle(
          fontSize: 16.sp,
          fontWeight: FontWeight.bold,
          color: color,
        ),
      ),
    ],
  );
}

数值用16.sp字号加粗。
颜色参数让不同指标有不同颜色。
整体设计简洁直观。

延迟颜色

根据延迟值返回对应颜色：

Color _getLatencyColor() {
  final latency = controller.latency.value;
  if (latency < 50) return AppTheme.wifiColor;
  if (latency < 100) return Colors.orange;
  return Colors.red;
}

延迟小于50ms用WiFi主色，表示良好。
50-100ms用橙色，表示一般。
超过100ms用红色，表示较差。

综合评分进度条

显示网络质量的综合评分：

Widget _buildQualityBar() {
  return Obx(() {
    final score = controller.qualityScore.value;
    final color = score >= 80
        ? AppTheme.wifiColor
        : score >= 60
            ? Colors.orange
            : Colors.red;

Obx监听qualityScore实现响应式更新。
根据分数选择颜色。
80分以上绿色，60-80橙色，60以下红色。

    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('综合评分', style: TextStyle(fontSize: 13.sp, color: AppTheme.textSecondary)),

Column垂直排列标签和进度条。
Row两端对齐标签和分数。
标签用13.sp小字号。

            Text(
              '$score/100',
              style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.bold, color: color),
            ),
          ],
        ),
        SizedBox(height: 8.h),

显示分数如"85/100"。
分数颜色与进度条颜色一致。
间距8.h后显示进度条。

        ClipRRect(
          borderRadius: BorderRadius.circular(4.r),
          child: LinearProgressIndicator(
            value: score / 100,
            backgroundColor: Colors.grey.shade200,
            valueColor: AlwaysStoppedAnimation(color),
            minHeight: 8.h,
          ),
        ),
      ],
    );
  });
}

ClipRRect给进度条添加圆角。
value是0-1的小数。
进度条颜色根据分数变化。

Controller实现

控制器管理WiFi相关的状态：

class WifiDetailController extends GetxController {
  final ssid = 'Home_WiFi_5G'.obs;
  final signalStrength = 85.obs;
  final frequency = '5GHz'.obs;
  final ipAddress = '192.168.1.100'.obs;
  final subnetMask = '255.255.255.0'.obs;
  final gateway = '192.168.1.1'.obs;

定义WiFi相关的响应式变量。
ssid存储WiFi名称。
网络参数如IP、网关等。

  final dns = '8.8.8.8'.obs;
  final macAddress = 'AA:BB:CC:DD:EE:FF'.obs;
  
  final todayUsage = 0.obs;
  final weekUsage = 0.obs;
  final monthUsage = 0.obs;

DNS和MAC地址。
流量统计相关的变量。
分别记录今日、本周、本月使用量。

  final latency = 25.obs;
  final downloadSpeed = 125.6.obs;
  final uploadSpeed = 45.2.obs;
  final qualityScore = 85.obs;

  @override
  void onInit() {
    super.onInit();
    loadWifiInfo();
    loadUsageStats();
  }

网络质量相关的变量。
latency是延迟毫秒数。
onInit加载WiFi信息和流量统计。

  void loadUsageStats() {
    todayUsage.value = 1024 * 1024 * 650;
    weekUsage.value = 1024 * 1024 * 1024 * 3;
    monthUsage.value = 1024 * 1024 * 1024 * 12;
  }

加载流量统计数据。
模拟数据：今日650MB，本周3GB，本月12GB。
实际项目中从系统API获取。

  void refreshInfo() {
    Get.snackbar('刷新中', '正在获取最新网络信息...');
    loadWifiInfo();
    loadUsageStats();
  }

refreshInfo重新加载所有数据。
显示snackbar提示用户正在刷新。
调用加载方法更新数据。

  String formatBytes(int bytes) {
    if (bytes < 1024) return '$bytes B';
    if (bytes < 1024 * 1024) return '${(bytes / 1024).toStringAsFixed(1)} KB';
    if (bytes < 1024 * 1024 * 1024) return '${(bytes / (1024 * 1024)).toStringAsFixed(2)} MB';
    return '${(bytes / (1024 * 1024 * 1024)).toStringAsFixed(2)} GB';
  }
}

formatBytes格式化字节数。
根据大小选择合适的单位。
toStringAsFixed控制小数位数。

写在最后

WiFi详情页面让用户全面了解当前WiFi网络的状态和使用情况。通过清晰的信息展示、直观的质量评分、便捷的快捷操作，帮助用户更好地管理WiFi连接。

可以继续优化的方向：

  • 添加WiFi安全性检测
  • 支持WiFi密码查看（需要权限）
  • 添加信号强度历史图表
  • 支持WiFi问题诊断

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

# flutter # php # 开发语言
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

Flutter for OpenHarmony移动数据使用监管助手App实战 - 套餐管理实现

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter for OpenHarmony 实战：RangeSlider 范围滑块详解

avatar 开源鸿蒙跨平台开发者社区

cix p1 OpenHarmony 6.0r 上使用mali g720调用vulkan进行端侧推理

笔者之前发布过此芯p1开发板使用OpenHarmony时llama.cpp不同优化速度对比(GPU vs CPU)的文章，使用的是一张amd的rx580显卡。理论上支持vulkan的GPU都可以使用vulkan后端的llama.cpp （GPU）进行端侧推理。

avatar 开源鸿蒙跨平台开发者社区