import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import '../controllers/home_controller.dart'; import '../../../routes/app_pages.dart'; import '../../../routes/app_routes.dart'; import '../../../core/widgets/common_bottom_nav.dart'; // 导入枚举 import '../controllers/home_controller.dart' show ConnectionStatus; // 呼吸灯动画组件 class AnimatedPulsing extends StatefulWidget { const AnimatedPulsing({Key? key}) : super(key: key); @override _AnimatedPulsingState createState() => _AnimatedPulsingState(); } class _AnimatedPulsingState extends State with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation _animation; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, )..repeat(reverse: true); _animation = Tween(begin: 0.5, end: 0.8).animate( CurvedAnimation(parent: _controller, curve: Curves.easeInOut), ); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _animation, builder: (context, child) { return Opacity( opacity: _animation.value, child: child, ); }, child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(16.r), gradient: RadialGradient( colors: [ Colors.white.withOpacity(0.3), Colors.transparent, ], center: Alignment.topRight, radius: 0.8, stops: const [0.0, 1.0], ), ), ), ); } } // 首页视图 class HomeView extends GetView { const HomeView({Key? key}) : super(key: key); @override Widget build(BuildContext context) { final bool isDarkMode = Theme.of(context).brightness == Brightness.dark; return Scaffold( backgroundColor: isDarkMode ? Colors.black : const Color(0xFFF9FAFC), body: SafeArea( child: SingleChildScrollView( padding: EdgeInsets.all(16.w), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // 顶部标题栏 _buildAppBar(isDarkMode), // 顶部图片 _buildEarbudsImage(), SizedBox(height: 20.h), // 设备状态卡片 _buildDeviceStatusCard(isDarkMode), SizedBox(height: 20.h), // 热门AI体验 _buildSectionTitle(isDarkMode), SizedBox(height: 16.h), _buildPremiumAILayout(), ], ), ), ), bottomNavigationBar: const CommonBottomNav(currentIndex: 0), ); } // 顶部标题栏 Widget _buildAppBar(bool isDarkMode) { return Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( 'DeepSound', style: TextStyle( fontSize: 20.sp, fontWeight: FontWeight.bold, color: isDarkMode ? Colors.white : Colors.grey[800], ), ), Container( width: 32.w, height: 32.w, decoration: BoxDecoration( color: isDarkMode ? Colors.grey[800] : Colors.grey[200], shape: BoxShape.circle, boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.2), blurRadius: 4, offset: const Offset(0, 2), ), ], ), child: IconButton( icon: Icon(Icons.settings_outlined, size: 16.sp, color: isDarkMode ? Colors.white70 : Colors.grey[600]), padding: EdgeInsets.zero, onPressed: () { Get.toNamed(Routes.settings); }, ), ), ], ); } // 耳机图片 Widget _buildEarbudsImage() { final bool isDarkMode = Get.isDarkMode; return SizedBox( height: 220.h, child: PageView( children: [ Center( child: ClipRRect( // 添加 ClipRRect 来实现圆角 borderRadius: BorderRadius.circular(16.r), // 使用与其他部件一致的圆角大小 child: SizedBox( width: double.infinity, height: 200.h, child: Image.asset( isDarkMode ? 'assets/images/robot_light.png' : 'assets/images/robot_light.png', fit: BoxFit.fitWidth, ), ), ), ), Center( child: ClipRRect( // 添加 ClipRRect borderRadius: BorderRadius.circular(16.r), child: Image.asset( isDarkMode ? 'assets/images/headphone_dark.png' : 'assets/images/headphone_light.png', height: 180.h, fit: BoxFit.contain, ), ), ), Center( child: ClipRRect( // 添加 ClipRRect borderRadius: BorderRadius.circular(16.r), child: SizedBox( width: double.infinity, height: 200.h, child: Image.asset( isDarkMode ? 'assets/images/glasses_light.png' : 'assets/images/glasses_light.png', fit: BoxFit.fitWidth, ), ), ), ), ], ), ); } // 设备状态卡片 Widget _buildDeviceStatusCard(bool isDarkMode) { return Container( decoration: BoxDecoration( color: isDarkMode ? const Color(0xFF1A1A1A) : Colors.white, borderRadius: BorderRadius.circular(16.r), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(isDarkMode ? 0.05 : 0.1), blurRadius: 10, offset: const Offset(0, 4), ), ], ), padding: EdgeInsets.all(16.w), child: Column( children: [ // 状态标题行 _buildDeviceStatusHeader(isDarkMode), // 设备信息 SizedBox(height: 12.h), Obx(() { print('连接状态: ${controller.connectionStatus}'); // 添加调试打印 print('错误信息: ${controller.connectionErrorMsg}'); // 添加调试打印 // 如果连接失败且有错误信息,显示错误提示 if (controller.connectionStatus == ConnectionStatus.failed && controller.connectionErrorMsg.isNotEmpty) { return _buildConnectionErrorSection(isDarkMode); //错误提示 } // 如果正在连接中,显示连接中提示 if (controller.connectionStatus == ConnectionStatus.connecting) { return _buildConnectingIndicator(); //连接中提示 } return controller.isConnected ? _buildConnectedDeviceInfo(isDarkMode) //已连接设备信息 : _buildDisconnectedInfo(isDarkMode); //未连接提示 }), // 连接按钮(仅在未连接时显示) SizedBox(height: 12.h), Obx(() { if (controller.connectionStatus == ConnectionStatus.disconnected) { return _buildConnectButton(); } else { return const SizedBox(); } }), ], ), ); } // 设备状态头部 Widget _buildDeviceStatusHeader(bool isDarkMode) { return Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Row( children: [ Icon( Icons.headset_outlined, size: 18.sp, color: isDarkMode ? Colors.grey[300] : Colors.grey[700], ), SizedBox(width: 8.w), Text( 'deviceStatus'.tr, // 设备状态 style: TextStyle( fontSize: 14.sp, fontWeight: FontWeight.w500, color: isDarkMode ? Colors.grey[300] : Colors.grey[700], ), ), ], ), Obx(() => Row( children: [ Container( //状态指示灯 width: 8.w, height: 8.w, decoration: BoxDecoration( color: controller.getConnectionStatusColor(), shape: BoxShape.circle, boxShadow: [ BoxShadow( color: controller .getConnectionStatusColor() .withOpacity(0.3), blurRadius: 4, spreadRadius: 1, ), ], ), ), SizedBox(width: 4.w), Text( controller.getConnectionStatusText(), style: TextStyle( fontSize: 12.sp, color: controller.getConnectionStatusColor(), ), ), // 添加刷新按钮 SizedBox(width: 8.w), InkWell( onTap: () => controller.refreshDeviceConnection(), borderRadius: BorderRadius.circular(12.r), child: Container( padding: EdgeInsets.all(4.w), decoration: BoxDecoration( color: isDarkMode ? Colors.grey[800] : Colors.grey[200], shape: BoxShape.circle, ), child: Icon( Icons.refresh, size: 14.sp, color: isDarkMode ? Colors.grey[400] : Colors.grey[600], ), ), ), ], )), ], ); } // 连接错误部分 Widget _buildConnectionErrorSection(bool isDarkMode) { return Column( children: [ Container( padding: EdgeInsets.all(12.w), decoration: BoxDecoration( color: isDarkMode ? Colors.red[900]!.withOpacity(0.2) : Colors.red[50], borderRadius: BorderRadius.circular(12.r), border: Border.all( color: isDarkMode ? Colors.red[800]! : Colors.red[200]!, ), ), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Icon( Icons.error_outline, color: Colors.red, size: 18.sp, ), SizedBox(width: 8.w), Expanded( child: Text( controller.connectionErrorMsg, style: TextStyle( fontSize: 12.sp, height: 1.4, color: isDarkMode ? Colors.red[300] : Colors.red[800], ), ), ), ], ), ), SizedBox(height: 12.h), // 连接按钮 ElevatedButton( onPressed: controller.rescanDevices, style: ElevatedButton.styleFrom( backgroundColor: Colors.blue, foregroundColor: Colors.white, minimumSize: Size(double.infinity, 40.h), elevation: 2, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.r), ), ), child: Text( 'reconnect'.tr, // 重新连接 style: TextStyle( fontSize: 14.sp, fontWeight: FontWeight.w500, ), ), ), ], ); } // 连接中指示器 Widget _buildConnectingIndicator() { return Container( padding: EdgeInsets.symmetric(vertical: 20.h), child: Center( child: Column( children: [ SizedBox( width: 30.w, height: 30.w, child: CircularProgressIndicator( strokeWidth: 2.5.w, valueColor: AlwaysStoppedAnimation(Colors.blue), ), ), SizedBox(height: 12.h), Text( 'connectingDevice'.tr, style: TextStyle( fontSize: 13.sp, color: Colors.blue, fontWeight: FontWeight.w500, ), ), ], ), ), ); } // 已连接设备信息(新增设备名称 + 信号强度 + 电池信息) Widget _buildConnectedDeviceInfo(bool isDarkMode) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Expanded( child: Text( '${'connectedTo'.tr}:${controller.getDeviceName()}', style: TextStyle( fontSize: 13.sp, fontWeight: FontWeight.w500, color: isDarkMode ? Colors.grey[300] : Colors.grey[700], ), overflow: TextOverflow.ellipsis, ), ), Container( padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 2.h), decoration: BoxDecoration( color: Colors.blue.withOpacity(0.1), borderRadius: BorderRadius.circular(4.r), ), child: Text( '${'signal'.tr}: ${controller.getSignalStrength()}', style: TextStyle( fontSize: 11.sp, color: Colors.blue[700], ), ), ), ], ), SizedBox(height: 12.h), _buildBatteryInfoGrid(isDarkMode), // SizedBox(height: 16.h), // _buildDeviceDetailsCard(isDarkMode), ], ); } // 电池信息网格布局 Widget _buildBatteryInfoGrid(bool isDarkMode) { return Obx(() { // 获取各部分电池电量 final leftBattery = controller.leftEarBattery; final rightBattery = controller.rightEarBattery; final caseBattery = controller.caseBattery; // 获取充电状态 final leftEarCharging = controller.leftEarCharging; final rightEarCharging = controller.rightEarCharging; final caseCharging = controller.caseCharging; // 使用更紧凑的布局 return Container( padding: EdgeInsets.symmetric(vertical: 8.h, horizontal: 4.w), decoration: BoxDecoration( color: isDarkMode ? Colors.grey[900] : Colors.grey[50], borderRadius: BorderRadius.circular(12.r), ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ // 左耳机 _buildCompactBatteryItem( label: '左', batteryLevel: leftBattery.value, isCharging: leftEarCharging.value, isDarkMode: isDarkMode, ), // 分隔线 Container( height: 30.h, width: 1, color: isDarkMode ? Colors.grey[800] : Colors.grey[300], ), // 右耳机 _buildCompactBatteryItem( label: '右', batteryLevel: rightBattery.value, isCharging: rightEarCharging.value, isDarkMode: isDarkMode, ), // 分隔线 Container( height: 30.h, width: 1, color: isDarkMode ? Colors.grey[800] : Colors.grey[300], ), // 充电盒 _buildCompactBatteryItem( label: '充电盒', batteryLevel: caseBattery.value, isCharging: caseCharging.value, isDarkMode: isDarkMode, ), ], ), ); }); } // 紧凑型电池项 Widget _buildCompactBatteryItem({ required String label, required int batteryLevel, required bool isDarkMode, bool isCharging = false, }) { // 获取电池图标和颜色 IconData batteryIcon; Color batteryColor; if (batteryLevel > 75) { batteryIcon = Icons.battery_full; batteryColor = Colors.green[600]!; } else if (batteryLevel > 50) { batteryIcon = Icons.battery_6_bar; batteryColor = Colors.green[600]!; } else if (batteryLevel > 25) { batteryIcon = Icons.battery_4_bar; batteryColor = Colors.orange[600]!; } else if (batteryLevel > 10) { batteryIcon = Icons.battery_3_bar; batteryColor = Colors.orange[600]!; } else { batteryIcon = Icons.battery_alert; batteryColor = Colors.red[600]!; } return Expanded( child: Padding( padding: EdgeInsets.symmetric(vertical: 6.h), child: Column( mainAxisSize: MainAxisSize.min, children: [ // 标签 Text( label, style: TextStyle( fontSize: 11.sp, color: isDarkMode ? Colors.grey[400] : Colors.grey[500], fontWeight: FontWeight.normal, ), textAlign: TextAlign.center, ), SizedBox(height: 4.h), // 电池指示器 Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( batteryIcon, size: 12.sp, color: batteryColor, ), SizedBox(width: 2.w), Text( '$batteryLevel%', style: TextStyle( fontSize: 11.sp, fontWeight: FontWeight.w500, color: batteryColor, ), ), if (isCharging) Icon( Icons.bolt, size: 10.sp, color: Colors.green[600], ), ], ), ], ), ), ); } // 设备详情卡片 Widget _buildDeviceDetailsCard(bool isDarkMode) { return Container( padding: EdgeInsets.all(12.w), decoration: BoxDecoration( color: isDarkMode ? Colors.grey[900] : Colors.grey[50], borderRadius: BorderRadius.circular(12.r), border: Border.all( color: isDarkMode ? Colors.grey[800]! : Colors.grey[200]!, width: 1, ), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // 设备ID _buildInfoRow( icon: Icons.perm_device_info, label: 'deviceId'.tr, value: controller.getDeviceId(), isDarkMode: isDarkMode, ), SizedBox(height: 8.h), // 固件版本 _buildInfoRow( icon: Icons.info_outline, label: 'firmwareVersion'.tr, value: controller.firmwareVersion.value, isDarkMode: isDarkMode, ), // 连接状态标签 // SizedBox(height: 10.h), // Container( // padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h), // decoration: BoxDecoration( // color: controller.getConnectionStatusColor().withOpacity(0.1), // borderRadius: BorderRadius.circular(6.r), // border: Border.all( // color: controller.getConnectionStatusColor().withOpacity(0.3), // width: 1, // ), // ), // child: Row( // mainAxisSize: MainAxisSize.min, // children: [ // Icon( // Icons.check_circle_outline, // size: 12.sp, // color: controller.getConnectionStatusColor(), // ), // SizedBox(width: 4.w), // Text( // controller.getConnectionStatusText(), // style: TextStyle( // fontSize: 11.sp, // color: controller.getConnectionStatusColor(), // fontWeight: FontWeight.w500, // ), // ), // ], // ), // ), ], ), ); } // 信息行 Widget _buildInfoRow({ required IconData icon, required String label, required String value, required bool isDarkMode, }) { return Row( children: [ Icon( icon, size: 14.sp, color: isDarkMode ? Colors.grey[400] : Colors.grey[600], ), SizedBox(width: 6.w), Text( '$label: ', style: TextStyle( fontSize: 11.sp, color: isDarkMode ? Colors.grey[400] : Colors.grey[600], ), ), Expanded( child: Text( value.isEmpty ? 'unknown'.tr : value, style: TextStyle( fontSize: 11.sp, fontWeight: FontWeight.w500, color: isDarkMode ? Colors.grey[300] : Colors.grey[700], ), overflow: TextOverflow.ellipsis, ), ), ], ); } // 未连接信息 Widget _buildDisconnectedInfo(bool isDarkMode) { return Container( padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 12.w), alignment: Alignment.center, decoration: BoxDecoration( color: isDarkMode ? Colors.grey[900] : Colors.grey[100], borderRadius: BorderRadius.circular(10.r), border: Border.all( color: isDarkMode ? Colors.grey[800]! : Colors.grey[300]!, width: 1, ), ), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( Icons.bluetooth_disabled, size: 14.sp, color: isDarkMode ? Colors.grey[400] : Colors.grey[700], ), SizedBox(height: 12.h), Text( 'disconnectedDevice'.tr, // 未连接设备,点击下方按钮连接 style: TextStyle( fontSize: 12.sp, color: isDarkMode ? Colors.grey[400] : Colors.grey[700], // height: 1.4, // fontWeight: FontWeight.w500, ), //textAlign: TextAlign.center, ), ], ), ); } // 连接按钮 Widget _buildConnectButton() { return ElevatedButton( onPressed: controller.rescanDevices, style: ElevatedButton.styleFrom( backgroundColor: Colors.blue, foregroundColor: Colors.white, minimumSize: Size(double.infinity, 44.h), elevation: 2, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.r), ), ), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.bluetooth_searching, size: 16.sp), SizedBox(width: 8.w), Text( 'connectDevice'.tr, // 连接设备 style: TextStyle( fontSize: 14.sp, fontWeight: FontWeight.w500, ), ), ], ), ); } // 热门AI体验标题 Widget _buildSectionTitle(bool isDarkMode) { return Row( children: [ Text( 'topAiExperiences'.tr, // 热门AI体验 style: TextStyle( fontSize: 18.sp, fontWeight: FontWeight.bold, color: isDarkMode ? Colors.white : Colors.grey[800], ), ), SizedBox(width: 8.w), Icon( Icons.star, color: Colors.amber, size: 20.w, ), ], ); } // 优质AI体验布局(左1右2) Widget _buildPremiumAILayout() { final bool isDarkMode = Get.isDarkMode; return Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ // 左侧大卡片 - AI助理 Expanded( flex: 1, child: _buildFeatureCard( title: 'aiAssistant'.tr, // AI全能助手 description: 'aiAssistantInfo'.tr, // 24小时专属顾问,解答问题、提供建议 icon: Icons.assistant, gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ Color(0xFF0066CC).withOpacity(0.3), Color(0xFF5E5CE6).withOpacity(0.3), ], ), onTap: controller.exploreAIFeatures, iconOnTop: true, height: 175.h, // 增加高度 isDarkMode: isDarkMode, iconColor: const Color(0xFF0066CC), ), ), SizedBox(width: 16.w), // 右侧两个卡片 Expanded( flex: 1, child: Column( children: [ // 右上卡片 - 同声翻译 _buildFeatureCard( title: 'simultaneousInterpretation'.tr, // 同声传译 description: 'simultaneousInterpretationInfo'.tr, // 80+语言实时翻译,出国无忧 icon: Icons.translate, gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ const Color(0xFF4CAF50).withOpacity(0.3), const Color(0xFF009688).withOpacity(0.3), ], ), onTap: controller.openTranslation, height: 83.h, // 增加高度 isDarkMode: isDarkMode, iconColor: const Color(0xFF4CAF50), ), SizedBox(height: 5.h), // 减少间距 // 右下卡片 - AI女友 _buildFeatureCard( title: 'aiCompanion'.tr, // 亲子陪伴 description: 'aiCompanionInfo'.tr, // 懂你心意,温暖陪伴 icon: Icons.favorite, gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ Color(0xFFE91E63).withOpacity(0.3), Color(0xFFFF5252).withOpacity(0.3), ], ), onTap: () {}, height: 85.h, // 增加高度 isDarkMode: isDarkMode, iconColor: const Color(0xFFE91E63), ), ], ), ), ], ); } // 特性卡片构建方法 Widget _buildFeatureCard({ required String title, required String description, required IconData icon, required LinearGradient gradient, required VoidCallback onTap, double? height, bool iconOnTop = false, bool isDarkMode = false, Color iconColor = Colors.white, }) { return GestureDetector( onTap: onTap, child: Container( height: height ?? 175.h, padding: EdgeInsets.all(14.w), decoration: BoxDecoration( gradient: gradient, borderRadius: BorderRadius.circular(16.r), boxShadow: [ BoxShadow( color: isDarkMode ? Colors.black.withOpacity(0.2) : Colors.grey.withOpacity(0.1), blurRadius: 8, offset: const Offset(0, 4), ), ], ), child: Stack( children: [ // 图标 if (iconOnTop) // 大卡片布局 Align( alignment: Alignment.topLeft, child: Container( width: 45.w, height: 45.w, decoration: BoxDecoration( color: iconColor.withOpacity(0.2), shape: BoxShape.circle, ), child: Icon( icon, color: iconColor, size: 24.w, ), ), ) else // 小卡片布局 - 图标 Align( alignment: Alignment.topLeft, child: Container( width: 34.w, height: 34.w, decoration: BoxDecoration( color: iconColor.withOpacity(0.2), shape: BoxShape.circle, ), child: Icon( icon, color: iconColor, size: 18.w, ), ), ), // 文本内容 if (iconOnTop) // 大卡片布局 - 文本 Padding( padding: EdgeInsets.only(top: 55.h), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Text( title, style: TextStyle( color: isDarkMode ? Colors.white : Colors.grey[800], fontSize: 16.sp, fontWeight: FontWeight.bold, ), maxLines: 1, overflow: TextOverflow.ellipsis, ), SizedBox(height: 4.h), Flexible( child: Text( description, style: TextStyle( color: isDarkMode ? Colors.grey[400] : Colors.grey[600], fontSize: 12.sp, ), maxLines: 3, overflow: TextOverflow.ellipsis, ), ), ], ), ) else // 小卡片布局 - 文本 Padding( padding: EdgeInsets.only(left: 44.w), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Text( title, style: TextStyle( color: isDarkMode ? Colors.white : Colors.grey[800], fontSize: 14.sp, fontWeight: FontWeight.bold, ), maxLines: 1, overflow: TextOverflow.ellipsis, ), SizedBox(height: 2.h), Flexible( child: Text( description, style: TextStyle( color: isDarkMode ? Colors.grey[400] : Colors.grey[600], fontSize: 10.sp, ), maxLines: 2, overflow: TextOverflow.ellipsis, ), ), ], ), ), ], ), ), ); } }