From 6e65df9f769a8f2142d6572b1736d623c00059f4 Mon Sep 17 00:00:00 2001 From: lxm <1274844347@qq.com> Date: Mon, 12 May 2025 16:27:45 +0800 Subject: [PATCH] =?UTF-8?q?refactor(home=5Fview):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E8=AE=BE=E5=A4=87=E8=BF=9E=E6=8E=A5=E7=8A=B6=E6=80=81=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E5=92=8C=E7=94=B5=E6=B1=A0=E4=BF=A1=E6=81=AF=E5=B8=83?= =?UTF-8?q?=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 重构设备连接状态显示逻辑，调整电池信息布局为紧凑型设计，提升界面可读性和用户体验。同时修复部分代码格式问题，确保代码风格一致。 --- lib/modules/home/views/home_view.dart | 382 ++++++++++++++------------ 1 file changed, 200 insertions(+), 182 deletions(-) diff --git a/lib/modules/home/views/home_view.dart b/lib/modules/home/views/home_view.dart index dae65616a..fc2f31eea 100644 --- a/lib/modules/home/views/home_view.dart +++ b/lib/modules/home/views/home_view.dart @@ -1,17 +1,17 @@ import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; -import 'dart:ui'; 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(); } @@ -25,14 +25,11 @@ class _AnimatedPulsingState extends State void initState() { super.initState(); _controller = AnimationController( - duration: Duration(seconds: 2), + 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, - ), + CurvedAnimation(parent: _controller, curve: Curves.easeInOut), ); } @@ -49,36 +46,36 @@ class _AnimatedPulsingState extends State builder: (context, child) { return Opacity( opacity: _animation.value, - 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: [0.0, 1.0], - ), - ), - ), + 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 : Color(0xFFF9FAFC), + backgroundColor: isDarkMode ? Colors.black : const Color(0xFFF9FAFC), body: SafeArea( child: SingleChildScrollView( padding: EdgeInsets.all(16.w), @@ -210,7 +207,7 @@ class HomeView extends GetView { Widget _buildDeviceStatusCard(bool isDarkMode) { return Container( decoration: BoxDecoration( - color: isDarkMode ? Color(0xFF1A1A1A) : Colors.white, + color: isDarkMode ? const Color(0xFF1A1A1A) : Colors.white, borderRadius: BorderRadius.circular(16.r), boxShadow: [ BoxShadow( @@ -229,20 +226,22 @@ class HomeView extends GetView { // 设备信息 SizedBox(height: 12.h), Obx(() { + print('连接状态: ${controller.connectionStatus}'); // 添加调试打印 + print('错误信息: ${controller.connectionErrorMsg}'); // 添加调试打印 // 如果连接失败且有错误信息，显示错误提示 if (controller.connectionStatus == ConnectionStatus.failed && controller.connectionErrorMsg.isNotEmpty) { - return _buildConnectionErrorSection(isDarkMode); + return _buildConnectionErrorSection(isDarkMode); //错误提示 } // 如果正在连接中，显示连接中提示 if (controller.connectionStatus == ConnectionStatus.connecting) { - return _buildConnectingIndicator(); + return _buildConnectingIndicator(); //连接中提示 } return controller.isConnected - ? _buildConnectedDeviceInfo(isDarkMode) - : _buildDisconnectedInfo(isDarkMode); + ? _buildConnectedDeviceInfo(isDarkMode) //已连接设备信息 + : _buildDisconnectedInfo(isDarkMode); //未连接提示 }), // 连接按钮（仅在未连接时显示） @@ -285,6 +284,7 @@ class HomeView extends GetView { Obx(() => Row( children: [ Container( + //状态指示灯 width: 8.w, height: 8.w, decoration: BoxDecoration( @@ -344,7 +344,8 @@ class HomeView extends GetView { 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]!), + color: isDarkMode ? Colors.red[800]! : Colors.red[200]!, + ), ), child: Row( crossAxisAlignment: CrossAxisAlignment.start, @@ -410,7 +411,7 @@ class HomeView extends GetView { ), SizedBox(height: 12.h), Text( - 'connectingDevice'.tr, // 正在连接设备... + 'connectingDevice'.tr, style: TextStyle( fontSize: 13.sp, color: Colors.blue, @@ -423,13 +424,45 @@ class HomeView extends GetView { ); } - // 已连接设备信息 + // 已连接设备信息（新增设备名称 + 信号强度 + 电池信息） 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), ], ); } @@ -441,53 +474,66 @@ class HomeView extends GetView { 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 GridView.count( - crossAxisCount: 3, - shrinkWrap: true, - physics: NeverScrollableScrollPhysics(), - crossAxisSpacing: 12.w, - childAspectRatio: 0.85, - children: [ - // 左耳机 - _buildBatteryGridItem( - icon: Icons.headphones, - label: '左耳机', - batteryLevel: leftBattery.value, - isCharging: leftEarCharging.value, - isDarkMode: isDarkMode, - ), + // 使用更紧凑的布局 + 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, + ), - // 右耳机 - _buildBatteryGridItem( - icon: Icons.headphones, - label: '右耳机', - batteryLevel: rightBattery.value, - isCharging: rightEarCharging.value, - isDarkMode: isDarkMode, - ), + // 分隔线 + Container( + height: 30.h, + width: 1, + color: isDarkMode ? Colors.grey[800] : Colors.grey[300], + ), - // 充电盒 - _buildBatteryGridItem( - icon: Icons.charging_station, - label: '充电盒', - batteryLevel: caseBattery.value, - isCharging: caseCharging.value, - isDarkMode: isDarkMode, - ), - ], + // 右耳机 + _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 _buildBatteryGridItem({ - required IconData icon, + // 紧凑型电池项 + Widget _buildCompactBatteryItem({ required String label, required int batteryLevel, required bool isDarkMode, @@ -496,7 +542,6 @@ class HomeView extends GetView { // 获取电池图标和颜色 IconData batteryIcon; Color batteryColor; - if (batteryLevel > 75) { batteryIcon = Icons.battery_full; batteryColor = Colors.green[600]!; @@ -505,7 +550,7 @@ class HomeView extends GetView { batteryColor = Colors.green[600]!; } else if (batteryLevel > 25) { batteryIcon = Icons.battery_4_bar; - batteryColor = Colors.yellow[600]!; + batteryColor = Colors.orange[600]!; } else if (batteryLevel > 10) { batteryIcon = Icons.battery_3_bar; batteryColor = Colors.orange[600]!; @@ -514,80 +559,52 @@ class HomeView extends GetView { batteryColor = Colors.red[600]!; } - return Container( - decoration: BoxDecoration( - color: isDarkMode ? Colors.grey[900] : Colors.grey[100], - borderRadius: BorderRadius.circular(12.r), - boxShadow: [ - BoxShadow( - color: isDarkMode - ? Colors.black.withOpacity(0.1) - : Colors.grey.withOpacity(0.1), - blurRadius: 4, - spreadRadius: 0, - offset: Offset(0, 2), - ), - ], - ), - padding: EdgeInsets.all(10.w), - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - // 设备图标 - Container( - padding: EdgeInsets.all(8.w), - decoration: BoxDecoration( - shape: BoxShape.circle, - ), - child: Icon( - icon, - size: 24.sp, - color: isDarkMode ? Colors.grey[300] : Colors.grey[800], - ), - ), - SizedBox(height: 6.h), - - // 标签 - Text( - label, - style: TextStyle( - fontSize: 12.sp, - color: isDarkMode ? Colors.grey[400] : Colors.grey[500], - fontWeight: FontWeight.normal, + 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, ), - textAlign: TextAlign.center, - ), - SizedBox(height: 6.h), + SizedBox(height: 4.h), - // 电池指示器 - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Icon( - batteryIcon, - size: 14.sp, - color: batteryColor, - ), - SizedBox(width: 4.w), - Text( - '$batteryLevel%', - style: TextStyle( - fontSize: 12.sp, - fontWeight: FontWeight.w500, + // 电池指示器 + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + batteryIcon, + size: 12.sp, color: batteryColor, ), - ), - if (isCharging) ...[ SizedBox(width: 2.w), - Icon( - Icons.bolt, - size: 12.sp, - color: Colors.green[600], + Text( + '$batteryLevel%', + style: TextStyle( + fontSize: 11.sp, + fontWeight: FontWeight.w500, + color: batteryColor, + ), ), + if (isCharging) + Icon( + Icons.bolt, + size: 10.sp, + color: Colors.green[600], + ), ], - ], - ), - ], + ), + ], + ), ), ); } @@ -625,37 +642,37 @@ class HomeView extends GetView { ), // 连接状态标签 - 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, - ), - ), - ], - ), - ), + // 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, + // ), + // ), + // ], + // ), + // ), ], ), ); @@ -701,33 +718,34 @@ class HomeView extends GetView { // 未连接信息 Widget _buildDisconnectedInfo(bool isDarkMode) { return Container( - padding: EdgeInsets.symmetric(vertical: 16.h, horizontal: 12.w), + 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(12.r), + borderRadius: BorderRadius.circular(10.r), border: Border.all( color: isDarkMode ? Colors.grey[800]! : Colors.grey[300]!, width: 1, ), ), - child: Column( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( Icons.bluetooth_disabled, - size: 32.sp, - color: isDarkMode ? Colors.grey[600] : Colors.grey[500], + size: 14.sp, + color: isDarkMode ? Colors.grey[400] : Colors.grey[700], ), SizedBox(height: 12.h), Text( 'disconnectedDevice'.tr, // 未连接设备，点击下方按钮连接 style: TextStyle( - fontSize: 13.sp, + fontSize: 12.sp, color: isDarkMode ? Colors.grey[400] : Colors.grey[700], - height: 1.4, - fontWeight: FontWeight.w500, + // height: 1.4, + // fontWeight: FontWeight.w500, ), - textAlign: TextAlign.center, + //textAlign: TextAlign.center, ), ], ), @@ -750,7 +768,7 @@ class HomeView extends GetView { child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - Icon(Icons.bluetooth_searching, size: 18.sp), + Icon(Icons.bluetooth_searching, size: 16.sp), SizedBox(width: 8.w), Text( 'connectDevice'.tr, // 连接设备 @@ -832,8 +850,8 @@ class HomeView extends GetView { begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ - Color(0xFF4CAF50).withOpacity(0.3), - Color(0xFF009688).withOpacity(0.3), + const Color(0xFF4CAF50).withOpacity(0.3), + const Color(0xFF009688).withOpacity(0.3), ], ), onTap: controller.openTranslation,