starwork_flutter/lib/views/accessControlManage/accessControl/access_control_view.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:starwork_flutter/common/constant/app_colors.dart';
import 'package:starwork_flutter/common/constant/app_images.dart';
import 'package:starwork_flutter/common/widgets/custome_app_bar_wdiget.dart';
import 'package:starwork_flutter/views/accessControlManage/accessControl/access_control_controller.dart';

class AccessControlView extends GetView<AccessControlController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.scaffoldBackgroundColor,
      appBar: CustomAppBarWidget(
        title: '门禁控制'.tr,
        showBackButton: false,
        backgroundColor: AppColors.scaffoldBackgroundColor,
      ),
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.symmetric(
            horizontal: 10.w,
            vertical: 10.h,
          ),
          child: Column(
            children: [
              _buildSearchBar(),
              SizedBox(
                height: 10.h,
              ),
              _buildList(),
            ],
          ),
        ),
      ),
    );
  }

  _buildSearchBar() {
    return TextField(
      controller: controller.searchInputController,
      textInputAction: TextInputAction.search,
      decoration: InputDecoration(
        hintText: '输入门禁点名称搜索'.tr,
        hintStyle: TextStyle(
          fontSize: 14.sp,
          color: const Color(0xFF999999),
        ),
        prefixIcon: const Icon(
          Icons.search,
          color: Color(0xFF999999),
        ),
        filled: true,
        // 启用背景填充
        fillColor: const Color(0xFFf0f0f0),
        // 灰色背景（可调整色值）
        border: InputBorder.none,
        // 设置内边距
        contentPadding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 6.h),
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(
            color: Colors.blue,
            width: 1.5,
          ),
          borderRadius: BorderRadius.circular(8.0.r),
        ),
        enabledBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.transparent),
          borderRadius: BorderRadius.circular(8.0.r),
        ),
      ),
    );
  }

  _buildList() {
    return GridView.builder(
      physics: const NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 2.2,
        mainAxisSpacing: 10.0.w,
        crossAxisSpacing: 10.0.h,
      ),
      itemCount: 5,
      itemBuilder: (context, index) {
        return _buildItem();
      },
    );
  }

  _buildItem() {
    return Stack(
      children: [
        Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8.0.r),
          ),
          padding: EdgeInsets.symmetric(
            horizontal: 10.w,
            vertical: 10.h,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image(
                    image: const AssetImage(AppImages.iconLockTypeDoorLock),
                    width: 20.w,
                    height: 20.w,
                    fit: BoxFit.contain,
                    gaplessPlayback: true,
                    // 防止闪烁
                    filterQuality: FilterQuality.medium,
                    // 优化过滤质量
                    errorBuilder: (context, error, stackTrace) {
                      return Icon(
                        Icons.image_not_supported,
                        size: 26.sp,
                        color: Colors.grey,
                      );
                    },
                  ),
                  SizedBox(
                    height: 10.h,
                  ),
                  Text('设备昵称')
                ],
              ),
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(
                    Radius.circular(20.r),
                  ),
                  border: Border.all(
                    color: Colors.grey.shade200,
                    width: 3.0,
                  ),
                ),
                padding: const EdgeInsets.all(5.0),
                child: Icon(
                  Icons.key,
                  color: Colors.grey,
                  size: 18.sp,
                ),
              )
            ],
          ),
        ),
        Positioned(
          top: 0,
          right: 0,
          child: Container(
            padding: EdgeInsets.symmetric(
              horizontal: 6.w,
              vertical: 2.h,
            ),
            decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(8.0.r),
                bottomLeft: Radius.circular(8.0.r),
              ),
            ),
            child: Text(
              '在线 '.tr,
              style: TextStyle(
                color: Colors.white,
                fontSize: 8.sp,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
        )
      ],
    );
  }
}