starwork_flutter/lib/views/mine/mine_view.dart

import 'package:flutter/material.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_images.dart';

import 'mine_controller.dart';

class MineView extends GetView<MineController> {
  const MineView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF6F7FB),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 15.w, vertical: 4.h),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _buildHeader(),
                SizedBox(height: 10.h),
                _buildUserProfile(),
                SizedBox(height: 10.h),
                _buildMenuItems(),
                SizedBox(height: 10.h),
                _buildBottomButtons(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  // 页面顶部标题栏
  Widget _buildHeader() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          '我的',
          style: TextStyle(
            fontSize: 18.sp,
            fontWeight: FontWeight.w500,
            color: Colors.black87,
          ),
          overflow: TextOverflow.ellipsis,
          maxLines: 1,
        ),
        Row(
          children: [
            Stack(
              children: [
                Icon(
                  Icons.settings,
                  size: 22.sp,
                ),
                Positioned(
                  right: 0,
                  top: 0,
                  child: Container(
                    width: 8.w,
                    height: 8.h,
                    decoration: const BoxDecoration(
                      color: Colors.red,
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }

  // 用户信息区域
  Widget _buildUserProfile() {
    return Row(
      children: [
        CircleAvatar(
          radius: 30.r,
          backgroundColor: Colors.grey[200],
          child: ClipOval(
            child: Image(
              image: const AssetImage(AppImages.defaultAvatar),
              width: 56.w,
              height: 56.w,
              fit: BoxFit.cover,
              gaplessPlayback: true,
              // 防止闪烁
              filterQuality: FilterQuality.medium,
              // 优化过滤质量
              errorBuilder: (context, error, stackTrace) {
                return Icon(
                  Icons.person,
                  size: 30.sp,
                  color: Colors.grey[400],
                );
              },
            ),
          ),
        ),
        SizedBox(width: 16.w),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'HikMall_30013234',
                style: TextStyle(
                  fontSize: 18.sp,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
              ),
              SizedBox(height: 4.h),
              Row(
                children: [
                  Image(
                    image: AssetImage(AppImages.iconVip),
                    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(width: 4.w),
                  Text(
                    '用户',
                    style: TextStyle(
                      fontSize: 14.sp,
                      color: Colors.grey,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 4.h),
          decoration: BoxDecoration(
            color: const Color(0xFFEBEFFF),
            borderRadius: BorderRadius.circular(6.r),
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Icon(
                Icons.group,
                size: 14.sp,
                color: Colors.blue,
              ),
              SizedBox(width: 4.w),
              Text(
                '我的团队',
                style: TextStyle(
                    fontSize: 12.sp,
                    color: Colors.black,
                    fontWeight: FontWeight.w500),
              ),
            ],
          ),
        ),
      ],
    );
  }


  // 菜单项区域
  Widget _buildMenuItems() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10.h),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.r),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.1),
            spreadRadius: 1,
            blurRadius: 4,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        children: [
          _buildMenuItem(
            title: '帮助中心',
            onTap: () {},
          ),
          Divider(height: 1.h, color: Colors.grey[200]),
          _buildMenuItem(
            title: '线下体验',
            onTap: () {},
          ),
          Divider(height: 1.h, color: Colors.grey[200]),
          _buildMenuItem(
            title: '分享海康互联',
            onTap: () {},
          ),
        ],
      ),
    );
  }

  // 底部按钮区域
  Widget _buildBottomButtons() {
    return Container(
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.r),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.1),
            spreadRadius: 1,
            blurRadius: 4,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _buildBottomButton(
            icon: Icons.receipt_long,
            title: '我的订单',
            onTap: () {},
          ),
          Container(
            width: 1.w,
            height: 40.h,
            color: Colors.grey[200],
          ),
          _buildBottomButton(
            icon: Icons.receipt,
            title: '发票管理',
            onTap: () {},
          ),
        ],
      ),
    );
  }

  // 菜单项组件
  Widget _buildMenuItem({
    required String title,
    required VoidCallback onTap,
  }) {
    return InkWell(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.symmetric( vertical: 10.h),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              title,
              style: TextStyle(
                fontSize: 16.sp,
                color: Colors.black87,
              ),
            ),
            Icon(
              Icons.arrow_forward_ios,
              size: 16.sp,
              color: Colors.grey[400],
            ),
          ],
        ),
      ),
    );
  }

  // 底部按钮组件
  Widget _buildBottomButton({
    required IconData icon,
    required String title,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(
            icon,
            size: 20.sp,
            color: Colors.grey[600],
          ),
          SizedBox(width: 8.w),
          Text(
            title,
            style: TextStyle(
              fontSize: 14.sp,
              color: Colors.grey[600],
            ),
          ),
        ],
      ),
    );
  }
}