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
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,13 +88,13 @@ class HomeView extends GetView<HomeController> {
children: [
// 顶部标题栏
_buildAppBar(isDarkMode),
// 可变高度的顶部图片区域
// 可变高度的顶部图片区域 - 使用Expanded让它占用剩余空间
Expanded(
child: Column(
children: [
Obx(() => _buildAdaptiveEarbudsImage()),
SizedBox(height: 20.h),
// 设备状态卡片 - 使用 AnimatedContainer 实现平滑过渡
// 设备状态卡片
IntroStepBuilder(
group: 'home',
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,
child: _buildAnimatedDeviceStatusCard(isDarkMode),
),
),
SizedBox(height: 20.h),
IntroStepBuilder(
group: 'home',
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,
),
),
// 热门AI体验 - 使用 Expanded 确保始终在可视范围内
Expanded(
child: Column(
],
),
),
// 热门AI体验 - 固定在底部,基于内容的固定高度
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, // 重要:让高度基于内容
children: [
_buildSectionTitle(isDarkMode),
SizedBox(height: 16.h),
Expanded(child: _buildPremiumAILayout()),
// 给AI布局一个固定的高度,或者让它基于内容自适应
_buildPremiumAILayout(),
],
),
),
],
),
),
@ -203,17 +210,17 @@ class HomeView extends GetView<HomeController> {
);
}
// 自适应高度的耳机图片 - 根据设备连接状态动态调整高度
// 在自适应图片组件中添加RepaintBoundary
Widget _buildAdaptiveEarbudsImage() {
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(
duration: const Duration(milliseconds: 500), // 平滑过渡动画
return RepaintBoundary(
// 添加重绘边界,优化动画性能
child: AnimatedContainer(
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut,
height: imageHeight,
child: PageView(
@ -232,11 +239,10 @@ class HomeView extends GetView<HomeController> {
),
],
),
),
);
}
// 带动画的设备状态卡片 - 实现平滑的高度变化过渡
Widget _buildAnimatedDeviceStatusCard(bool isDarkMode) {
return Obx(() {

Loading…
Cancel
Save