From c35081029246ae6565a6373063df447f015133fd Mon Sep 17 00:00:00 2001 From: lxm <1274844347@qq.com> Date: Wed, 20 Aug 2025 19:59:00 +0800 Subject: [PATCH] =?UTF-8?q?refactor(home):=20=E4=BC=98=E5=8C=96=E4=B8=BB?= =?UTF-8?q?=E9=A1=B5=E5=B8=83=E5=B1=80=E5=92=8C=E5=8A=A8=E7=94=BB=E6=95=88?= =?UTF-8?q?=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将 SingleChildScrollView 替换为 Padding 以改善布局 - 实现自适应高度的耳机图片组件 - 为设备状态卡片添加平滑过渡动画 - 使用 AnimatedSwitcher 实现内容切换动画 - 优化热门AI体验部分的布局 --- lib/modules/home/views/home_view.dart | 153 ++++++++++-------- .../login/controllers/login_controller.dart | 2 +- 2 files changed, 84 insertions(+), 71 deletions(-) diff --git a/lib/modules/home/views/home_view.dart b/lib/modules/home/views/home_view.dart index e51be533d..8506a7337 100644 --- a/lib/modules/home/views/home_view.dart +++ b/lib/modules/home/views/home_view.dart @@ -76,7 +76,7 @@ class HomeView extends GetView { return Scaffold( backgroundColor: isDarkMode ? Colors.black : const Color(0xFFF9FAFC), body: SafeArea( - child: SingleChildScrollView( + child: Padding( padding: EdgeInsets.all(16.w), child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -84,12 +84,12 @@ class HomeView extends GetView { // 顶部标题栏 _buildAppBar(isDarkMode), - // 顶部图片 - _buildEarbudsImage(), + // 可变高度的顶部图片区域 + Obx(() => _buildAdaptiveEarbudsImage()), SizedBox(height: 20.h), - // 设备状态卡片 + // 设备状态卡片 - 使用 AnimatedContainer 实现平滑过渡 IntroStepBuilder( group: 'home', order: 1, @@ -107,7 +107,7 @@ class HomeView extends GetView { }, builder: (BuildContext context, GlobalKey key) => SizedBox( key: key, - child: _buildDeviceStatusCard(isDarkMode), + child: _buildAnimatedDeviceStatusCard(isDarkMode), ), ), @@ -143,10 +143,17 @@ class HomeView extends GetView { ), ), - // 热门AI体验 - _buildSectionTitle(isDarkMode), - SizedBox(height: 16.h), - _buildPremiumAILayout(), + // 热门AI体验 - 使用 Expanded 确保始终在可视范围内 + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + _buildSectionTitle(isDarkMode), + SizedBox(height: 16.h), + Expanded(child: _buildPremiumAILayout()), + ], + ), + ), ], ), ), @@ -196,70 +203,48 @@ class HomeView extends GetView { ); } - // 耳机图片 - Widget _buildEarbudsImage() { + + + // 自适应高度的耳机图片 - 根据设备连接状态动态调整高度 + Widget _buildAdaptiveEarbudsImage() { final bool isDarkMode = Get.isDarkMode; - return SizedBox( - height: 220.h, + // 根据设备连接状态调整图片高度 + // 已连接时高度较小，为设备信息让出空间；未连接时高度较大 + final double imageHeight = controller.isFullyConnectedRx.value ? 160.h : 220.h; + + return AnimatedContainer( + duration: const Duration(milliseconds: 500), // 平滑过渡动画 + curve: Curves.easeInOut, + height: imageHeight, 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_new3.png' : 'assets/images/headphone_new4.png', - height: 220.h, + height: imageHeight, 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) { + + + // 带动画的设备状态卡片 - 实现平滑的高度变化过渡 + Widget _buildAnimatedDeviceStatusCard(bool isDarkMode) { return Obx(() { - // 使用连接状态作为key，强制在状态改变时重建widget final isConnected = controller.isFullyConnectedRx.value; - return Container( - key: ValueKey('device_status_$isConnected'), + + return AnimatedContainer( + duration: const Duration(milliseconds: 500), // 平滑过渡动画 + curve: Curves.easeInOut, decoration: BoxDecoration( color: isDarkMode ? const Color(0xFF1A1A1A) : Colors.white, borderRadius: BorderRadius.circular(16.r), @@ -273,30 +258,58 @@ class HomeView extends GetView { ), padding: EdgeInsets.fromLTRB(16.w, 16.h, 16.w, 16.h), child: Column( + mainAxisSize: MainAxisSize.min, // 重要：让容器高度自适应内容 children: [ // 状态标题行 _buildDeviceStatusHeader(isDarkMode), - // 设备信息 + // 设备信息 - 使用 AnimatedSwitcher 实现内容切换动画 SizedBox(height: 12.h), - Obx(() { - // 移除连接失败和连接中的状态判断，直接根据是否完全连接来判断 - // 使用响应式访问确保UI更新 - return controller.isFullyConnectedRx.value - ? _buildConnectedDeviceInfo(isDarkMode) //已连接设备信息 - : _buildDisconnectedInfo(isDarkMode); //未连接提示 - }), - - // 连接按钮（仅在未连接时显示） + AnimatedSwitcher( + duration: const Duration(milliseconds: 300), + transitionBuilder: (Widget child, Animation animation) { + return FadeTransition( + opacity: animation, + child: SlideTransition( + position: Tween( + begin: const Offset(0, 0.1), + end: Offset.zero, + ).animate(animation), + child: child, + ), + ); + }, + child: Container( + key: ValueKey('device_info_$isConnected'), + child: isConnected + ? _buildConnectedDeviceInfo(isDarkMode) + : _buildDisconnectedInfo(isDarkMode), + ), + ), + + // 连接按钮 - 使用 AnimatedSwitcher 实现按钮切换动画 SizedBox(height: 12.h), - Obx(() { - // 使用响应式访问确保UI更新 - if (!controller.isFullyConnectedRx.value) { - return _buildConnectButton(); - } else { - return _buildDeviceButton(isDarkMode); - } - }), + AnimatedSwitcher( + duration: const Duration(milliseconds: 300), + transitionBuilder: (Widget child, Animation animation) { + return FadeTransition( + opacity: animation, + child: SlideTransition( + position: Tween( + begin: const Offset(0, 0.1), + end: Offset.zero, + ).animate(animation), + child: child, + ), + ); + }, + child: Container( + key: ValueKey('device_button_$isConnected'), + child: !isConnected + ? _buildConnectButton() + : _buildDeviceButton(isDarkMode), + ), + ), ], ), ); diff --git a/lib/modules/login/controllers/login_controller.dart b/lib/modules/login/controllers/login_controller.dart index db69f998c..6462b66f1 100644 --- a/lib/modules/login/controllers/login_controller.dart +++ b/lib/modules/login/controllers/login_controller.dart @@ -845,7 +845,7 @@ class LoginController extends GetxController { "name": params["name"], "avatar": params["avatar"], "language": _languageCode, - "channel": _userChannel.toString(), + "channel": _userChannel, "version": _appVersion, }).timeout( const Duration(seconds: 30), // 30秒超时