Browse Source

perf(home): 优化首页布局和图片加载性能

预缓存图片资源以减少加载延迟,重构布局结构使热门AI体验区域固定在底部,并为自适应图片组件添加重绘边界以优化动画性能
newdev_shunjiawei
lxm 1 year ago
parent
commit
94cb890e6e
  1. 54
      lib/modules/home/views/home_view.dart

54
lib/modules/home/views/home_view.dart

@ -72,6 +72,11 @@ class HomeView extends GetView<HomeController> {
@override @override
Widget build(BuildContext context) { 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; final bool isDarkMode = Theme.of(context).brightness == Brightness.dark;
return Scaffold( return Scaffold(
backgroundColor: isDarkMode ? Colors.black : const Color(0xFFF9FAFC), backgroundColor: isDarkMode ? Colors.black : const Color(0xFFF9FAFC),
@ -83,13 +88,13 @@ class HomeView extends GetView<HomeController> {
children: [ children: [
// 顶部标题栏 // 顶部标题栏
_buildAppBar(isDarkMode), _buildAppBar(isDarkMode),
// 可变高度的顶部图片区域 - 使用Expanded让它占用剩余空间
// 可变高度的顶部图片区域 Expanded(
child: Column(
children: [
Obx(() => _buildAdaptiveEarbudsImage()), Obx(() => _buildAdaptiveEarbudsImage()),
SizedBox(height: 20.h), SizedBox(height: 20.h),
// 设备状态卡片
// 设备状态卡片 - 使用 AnimatedContainer 实现平滑过渡
IntroStepBuilder( IntroStepBuilder(
group: 'home', group: 'home',
order: 1, order: 1,
@ -105,14 +110,13 @@ class HomeView extends GetView<HomeController> {
}, },
); );
}, },
builder: (BuildContext context, GlobalKey key) => SizedBox( builder: (BuildContext context, GlobalKey key) =>
SizedBox(
key: key, key: key,
child: _buildAnimatedDeviceStatusCard(isDarkMode), child: _buildAnimatedDeviceStatusCard(isDarkMode),
), ),
), ),
SizedBox(height: 20.h), SizedBox(height: 20.h),
IntroStepBuilder( IntroStepBuilder(
group: 'home', group: 'home',
order: 2, order: 2,
@ -138,22 +142,25 @@ class HomeView extends GetView<HomeController> {
), ),
); );
}, },
builder: (BuildContext context, GlobalKey key) => SizedBox( builder: (BuildContext context, GlobalKey key) =>
SizedBox(
key: key, key: key,
), ),
), ),
],
// 热门AI体验 - 使用 Expanded 确保始终在可视范围内 ),
Expanded( ),
child: Column( // 热门AI体验 - 固定在底部,基于内容的固定高度
Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, // 重要:让高度基于内容
children: [ children: [
_buildSectionTitle(isDarkMode), _buildSectionTitle(isDarkMode),
SizedBox(height: 16.h), SizedBox(height: 16.h),
Expanded(child: _buildPremiumAILayout()), // 给AI布局一个固定的高度,或者让它基于内容自适应
_buildPremiumAILayout(),
], ],
), ),
),
], ],
), ),
), ),
@ -203,17 +210,17 @@ class HomeView extends GetView<HomeController> {
); );
} }
// 自适应高度的耳机图片 - 根据设备连接状态动态调整高度 // 自适应高度的耳机图片 - 根据设备连接状态动态调整高度
// 在自适应图片组件中添加RepaintBoundary
Widget _buildAdaptiveEarbudsImage() { Widget _buildAdaptiveEarbudsImage() {
final bool isDarkMode = Get.isDarkMode; final bool isDarkMode = Get.isDarkMode;
// 根据设备连接状态调整图片高度 final double imageHeight =
// 已连接时高度较小,为设备信息让出空间;未连接时高度较大 controller.isFullyConnectedRx.value ? 160.h : 220.h;
final double imageHeight = controller.isFullyConnectedRx.value ? 160.h : 220.h;
return AnimatedContainer( return RepaintBoundary(
duration: const Duration(milliseconds: 500), // 平滑过渡动画 // 添加重绘边界,优化动画性能
child: AnimatedContainer(
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut, curve: Curves.easeInOut,
height: imageHeight, height: imageHeight,
child: PageView( child: PageView(
@ -232,11 +239,10 @@ class HomeView extends GetView<HomeController> {
), ),
], ],
), ),
),
); );
} }
// 带动画的设备状态卡片 - 实现平滑的高度变化过渡 // 带动画的设备状态卡片 - 实现平滑的高度变化过渡
Widget _buildAnimatedDeviceStatusCard(bool isDarkMode) { Widget _buildAnimatedDeviceStatusCard(bool isDarkMode) {
return Obx(() { return Obx(() {

Loading…
Cancel
Save