diff --git a/lib/modules/home/views/home_view.dart b/lib/modules/home/views/home_view.dart index 8506a7337..1ff190e8f 100644 --- a/lib/modules/home/views/home_view.dart +++ b/lib/modules/home/views/home_view.dart @@ -72,6 +72,11 @@ class HomeView extends GetView { @override Widget build(BuildContext context) { + // 预缓存图片 + precacheImage( + const AssetImage('assets/images/headphone_new3.png'), context); + precacheImage( + const AssetImage('assets/images/headphone_new4.png'), context); final bool isDarkMode = Theme.of(context).brightness == Brightness.dark; return Scaffold( backgroundColor: isDarkMode ? Colors.black : const Color(0xFFF9FAFC), @@ -83,77 +88,79 @@ class HomeView extends GetView { children: [ // 顶部标题栏 _buildAppBar(isDarkMode), - - // 可变高度的顶部图片区域 - Obx(() => _buildAdaptiveEarbudsImage()), - - SizedBox(height: 20.h), - - // 设备状态卡片 - 使用 AnimatedContainer 实现平滑过渡 - IntroStepBuilder( - group: 'home', - order: 1, - onWidgetLoad: () { - controller.noviceGuideService.startHomeGuide(); - }, - overlayBuilder: (params) { - return IntroOverlayBuilder.aiBuilder( - params, - '欢迎使用Voitrans!首先,让我们唤醒你的专属 AI—— 小言', - onNext: () { - controller.noviceGuideService.startWakeupListen(); - }, - ); - }, - builder: (BuildContext context, GlobalKey key) => SizedBox( - key: key, - child: _buildAnimatedDeviceStatusCard(isDarkMode), - ), - ), - - SizedBox(height: 20.h), - - IntroStepBuilder( - group: 'home', - order: 2, - getOverlayPosition: ({ - required Offset offset, - required Size screenSize, - required Size size, - }) { - return OverlayPosition( - top: 200.h, - width: screenSize.width, - crossAxisAlignment: CrossAxisAlignment.end, - ); - }, - overlayBuilder: (params) { - return Obx( - () => IntroOverlayBuilder.homeBuilder( - params, - controller.noviceGuideService.isWakeup.value, - onNext: () { - controller.noviceGuideService.closeWakeupListen(); - }, - ), - ); - }, - builder: (BuildContext context, GlobalKey key) => SizedBox( - key: key, - ), - ), - - // 热门AI体验 - 使用 Expanded 确保始终在可视范围内 + // 可变高度的顶部图片区域 - 使用Expanded让它占用剩余空间 Expanded( child: Column( - crossAxisAlignment: CrossAxisAlignment.start, children: [ - _buildSectionTitle(isDarkMode), - SizedBox(height: 16.h), - Expanded(child: _buildPremiumAILayout()), + Obx(() => _buildAdaptiveEarbudsImage()), + SizedBox(height: 20.h), + // 设备状态卡片 + IntroStepBuilder( + group: 'home', + order: 1, + onWidgetLoad: () { + controller.noviceGuideService.startHomeGuide(); + }, + overlayBuilder: (params) { + return IntroOverlayBuilder.aiBuilder( + params, + '欢迎使用Voitrans!首先,让我们唤醒你的专属 AI—— 小言', + onNext: () { + controller.noviceGuideService.startWakeupListen(); + }, + ); + }, + builder: (BuildContext context, GlobalKey key) => + SizedBox( + key: key, + child: _buildAnimatedDeviceStatusCard(isDarkMode), + ), + ), + SizedBox(height: 20.h), + IntroStepBuilder( + group: 'home', + order: 2, + getOverlayPosition: ({ + required Offset offset, + required Size screenSize, + required Size size, + }) { + return OverlayPosition( + top: 200.h, + width: screenSize.width, + crossAxisAlignment: CrossAxisAlignment.end, + ); + }, + overlayBuilder: (params) { + return Obx( + () => IntroOverlayBuilder.homeBuilder( + params, + controller.noviceGuideService.isWakeup.value, + onNext: () { + controller.noviceGuideService.closeWakeupListen(); + }, + ), + ); + }, + builder: (BuildContext context, GlobalKey key) => + SizedBox( + key: key, + ), + ), ], ), ), + // 热门AI体验 - 固定在底部,基于内容的固定高度 + Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, // 重要:让高度基于内容 + children: [ + _buildSectionTitle(isDarkMode), + SizedBox(height: 16.h), + // 给AI布局一个固定的高度,或者让它基于内容自适应 + _buildPremiumAILayout(), + ], + ), ], ), ), @@ -203,40 +210,39 @@ class HomeView extends GetView { ); } - - // 自适应高度的耳机图片 - 根据设备连接状态动态调整高度 + // 在自适应图片组件中添加RepaintBoundary Widget _buildAdaptiveEarbudsImage() { final bool isDarkMode = Get.isDarkMode; - // 根据设备连接状态调整图片高度 - // 已连接时高度较小,为设备信息让出空间;未连接时高度较大 - 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( - borderRadius: BorderRadius.circular(16.r), - child: Image.asset( - isDarkMode - ? 'assets/images/headphone_new3.png' - : 'assets/images/headphone_new4.png', - height: imageHeight, - fit: BoxFit.contain, + final double imageHeight = + controller.isFullyConnectedRx.value ? 160.h : 220.h; + + return RepaintBoundary( + // 添加重绘边界,优化动画性能 + child: AnimatedContainer( + duration: const Duration(milliseconds: 500), + curve: Curves.easeInOut, + height: imageHeight, + child: PageView( + children: [ + Center( + child: ClipRRect( + borderRadius: BorderRadius.circular(16.r), + child: Image.asset( + isDarkMode + ? 'assets/images/headphone_new3.png' + : 'assets/images/headphone_new4.png', + height: imageHeight, + fit: BoxFit.contain, + ), ), ), - ), - ], + ], + ), ), ); } - - // 带动画的设备状态卡片 - 实现平滑的高度变化过渡 Widget _buildAnimatedDeviceStatusCard(bool isDarkMode) { return Obx(() {