starwork_flutter/lib/views/device/searchDevice/search_device_view.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:starcloud/entity/star_cloud_scan_result.dart';
import 'package:starwork_flutter/ble/model/scan_device_info.dart';
import 'package:starwork_flutter/views/device/searchDevice/search_device_controller.dart';

class SearchDeviceView extends GetView<SearchDeviceController> {
  const SearchDeviceView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF6F7FB),
      appBar: AppBar(
        title: Row(
          children: [
            Text(
              '搜索设备'.tr,
              style: TextStyle(
                fontSize: 18.sp,
                fontWeight: FontWeight.w500,
                color: Colors.black87,
              ),
            ),
          ],
        ),
        actions: [
          TextButton(
            onPressed: _onRefresh,
            child: Text(
              '刷新'.tr,
              style: TextStyle(
                fontSize: 16.sp,
                color: Colors.black87,
                fontWeight: FontWeight.w500,
              ),
            ),
          )
        ],
      ),
      body: Column(
        children: [
          // 设备列表
          _buildRefreshableDeviceList(),
          // 固定在底部的提示信息
          _buildDeviceTip(),
        ],
      ),
    );
  }

  // 构建下拉刷新的设备列表
  _buildRefreshableDeviceList() {
    return RefreshIndicator(
      onRefresh: _onRefresh,
      // 基础样式配置
      color: const Color(0xFF4A90E2),
      // 刷新指示器颜色
      backgroundColor: Colors.white,
      // 背景颜色

      // 控制下拉触发距离的关键属性
      displacement: 60.0,
      // 刷新指示器距离顶部的距离

      // 控制下拉幅度的关键属性
      triggerMode: RefreshIndicatorTriggerMode.onEdge,
      // 触发模式

      // 描边宽度
      strokeWidth: 2.5,
      // 刷新指示器的描边宽度

      // 语义标签（用于无障碍功能）
      semanticsLabel: '下拉刷新设备列表',
      semanticsValue: '刷新中...',

      child: SingleChildScrollView(
        physics: const AlwaysScrollableScrollPhysics(
          // 控制滚动物理特性
          parent: BouncingScrollPhysics(), // 添加弹性滚动效果
        ),
        child: Obx(
          () => ConstrainedBox(
            constraints: BoxConstraints(
              minHeight: MediaQuery.of(Get.context!).size.height -
                  MediaQuery.of(Get.context!).padding.top -
                  kToolbarHeight -
                  60.h, // 减去AppBar高度、状态栏高度和底部提示区域高度
            ),
            child: controller.deviceList.isNotEmpty
                ? Column(
                    children: [
                      _buildDeviceList(),
                      SizedBox(height: 16.h),
                    ],
                  )
                : Center(
                    child: Column(
                      children: [
                        CircularProgressIndicator(
                          strokeWidth: 2.w,
                          valueColor: const AlwaysStoppedAnimation<Color>(
                            Colors.blue,
                          ),
                          backgroundColor: Colors.grey[200],
                        ),
                        SizedBox(height: 20.h),
                        Text(
                          '正在搜索附近设备...\n请确保蓝牙处于正常状态'.tr,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 12.sp,
                            fontWeight: FontWeight.w500,
                          ),
                        )
                      ],
                    ),
                  ),
          ),
        ),
      ),
    );
  }

  // 刷新方法
  Future<void> _onRefresh() async {
    // 调用controller的刷新方法
    await controller.refreshDevices();
  }

  // 构建设备列表
  _buildDeviceList() {
    return Obx(
      () => Column(
        children: [
          // 动态生成设备列表项
          ...controller.deviceList.asMap().entries.map((entry) {
            int index = entry.key;
            var device = entry.value;

            return Column(
              children: [
                // 如果是第一项，显示间距
                if (index == 0) SizedBox(height: 10.h),
                _buildItem(device: device, index: index),
                // 如果不是最后一项，显示间距
                if (index < controller.deviceList.length - 1) SizedBox(height: 10.h),
              ],
            );
          }).toList(),
        ],
      ),
    );
  }

  // 构建底部提示信息
  _buildDeviceTip() {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 10.h),
      child: Text(
        '没有更多设备',
        style: TextStyle(
          fontSize: 12.sp,
          color: Colors.grey[500],
          fontWeight: FontWeight.w400,
        ),
      ),
    );
  }

  _buildItem({required StarCloudScanResult device, required int index}) {

    return GestureDetector(
      onTap: () async {
        controller.connectingDevices(device);
      },
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 10.w),
        padding: EdgeInsets.all(10.w),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(
            Radius.circular(8.r),
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                const Icon(
                  Icons.lock,
                  color: Colors.blue,
                ),
                SizedBox(
                  width: 8.w,
                ),
                Text(
                  device.advName,
                  style: TextStyle(
                    fontSize: 16.sp,
                    color: Colors.black87,
                    fontWeight: FontWeight.w400,
                  ),
                )
              ],
            ),
            GestureDetector(
              onTap: () {
                // 处理添加设备事件
                print('添加设备 ${device.advName}');
                // 这里可以添加具体的添加设备逻辑
              },
              child: const Icon(
                Icons.add,
                color: Colors.blue,
              ),
            )
          ],
        ),
      ),
    );
  }
}