diff --git a/assets/icon/icon_menu.png b/assets/icon/icon_menu.png new file mode 100644 index 0000000..393beef Binary files /dev/null and b/assets/icon/icon_menu.png differ diff --git a/assets/icon/icon_vip.png b/assets/icon/icon_vip.png new file mode 100644 index 0000000..b82b8d9 Binary files /dev/null and b/assets/icon/icon_vip.png differ diff --git a/assets/images/default_avatar.png b/assets/images/default_avatar.png new file mode 100644 index 0000000..7d920f6 Binary files /dev/null and b/assets/images/default_avatar.png differ diff --git a/lib/common/constant/app_images.dart b/lib/common/constant/app_images.dart index 2a9e24e..6bca120 100644 --- a/lib/common/constant/app_images.dart +++ b/lib/common/constant/app_images.dart @@ -52,6 +52,8 @@ class AppImages{ static const String iconTeamQrcode = 'assets/icon/team_qrcode.png'; static const String iconDeviceManagement = 'assets/icon/device_management.png'; static const String iconTableMenu = 'assets/icon/icon_table_menu.png'; + static const String iconVip = 'assets/icon/icon_vip.png'; + static const String defaultAvatar = 'assets/images/default_avatar.png'; // 底部导航栏图标 static const String iconHome = 'assets/icon/bar/home.png'; diff --git a/lib/views/home/home_view.dart b/lib/views/home/home_view.dart index d013fa2..32b699f 100644 --- a/lib/views/home/home_view.dart +++ b/lib/views/home/home_view.dart @@ -40,8 +40,13 @@ class HomeView extends GetView { children: [ // 固定的上半部分 _buildPageHead(context), - SizedBox( - height: 10.h, + Obx( + () => Visibility( + visible: controller.isOpenNotificationPermission.value, + child: SizedBox( + height: 10.h, + ), + ), ), _buildSystemNotificationPermissionRow(), @@ -160,23 +165,29 @@ class HomeView extends GetView { return RefreshIndicator( onRefresh: _onRefresh, // 基础样式配置 - color: const Color(0xFF4A90E2), // 刷新指示器颜色 - backgroundColor: Colors.white, // 背景颜色 - + color: const Color(0xFF4A90E2), + // 刷新指示器颜色 + backgroundColor: Colors.white, + // 背景颜色 + // 控制下拉触发距离的关键属性 - displacement: 60.0, // 刷新指示器距离顶部的距离 - edgeOffset: 0.0, // 边缘偏移量 - + displacement: 60.0, + // 刷新指示器距离顶部的距离 + edgeOffset: 0.0, + // 边缘偏移量 + // 控制下拉幅度的关键属性 - triggerMode: RefreshIndicatorTriggerMode.onEdge, // 触发模式 - + triggerMode: RefreshIndicatorTriggerMode.onEdge, + // 触发模式 + // 描边宽度 - strokeWidth: 2.5, // 刷新指示器的描边宽度 - + strokeWidth: 2.5, + // 刷新指示器的描边宽度 + // 语义标签（用于无障碍功能） semanticsLabel: '下拉刷新首页内容', semanticsValue: '刷新中...', - + child: SingleChildScrollView( physics: const AlwaysScrollableScrollPhysics( // 添加弹性滚动效果 diff --git a/lib/views/mine/mine_view.dart b/lib/views/mine/mine_view.dart index 56a913a..6e87d06 100644 --- a/lib/views/mine/mine_view.dart +++ b/lib/views/mine/mine_view.dart @@ -1,5 +1,8 @@ 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'; @@ -9,16 +12,309 @@ class MineView extends GetView { @override Widget build(BuildContext context) { return Scaffold( - appBar: AppBar( - title: const Text('MineView'), - centerTitle: true, - ), - body: const Center( - child: Text( - 'MineView is working', - style: TextStyle(fontSize: 20), + 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], + ), + ), + ], + ), + ); + } }