Flutter应用中如何在启动页预加载网络图片以优化图片切换与首屏加载体验

嘿，我完全懂你这种困扰——刚打开App要等首屏轮播图加载，切换到网格视图又要再等一遍，这种卡顿感真的很影响用户体验。既然你已经在用CachedNetworkImage，其实可以直接利用它的缓存机制，在启动页提前把所有图片加载好，下面给你一步步说怎么实现，还会帮你排查代码里可能拖后腿的小问题：

第一步：实现图片预加载逻辑 #

CachedNetworkImage默认依赖flutter_cache_manager来管理缓存，我们可以直接用这个库的DefaultCacheManager来提前下载所有需要的图片。写一个简单的预加载函数：

import 'package:flutter_cache_manager/flutter_cache_manager.dart';

// 传入所有需要预加载的图片链接列表，逐个下载到本地缓存
Future<void> preloadImages(List<String> imageUrls) async {
  for (final url in imageUrls) {
    // 强制下载图片到缓存，后续CachedNetworkImage会直接读本地文件
    await DefaultCacheManager().getSingleFile(url);
  }
}

如果图片数量较多，你还可以在循环里加入进度监听，给用户显示加载进度（后面启动页会用到）。

第二步：改造启动页，完成预加载再跳转 #

把你的启动页改成一个StatefulWidget，在初始化时执行预加载，完成后再跳转到主页面。这样用户看到的启动页会停留到所有图片加载完成，换来后续流畅的体验：

class SplashScreen extends StatefulWidget {
  // 需要预加载的图片链接列表
  final List<String> imageUrls;
  // 预加载完成后要跳转的主页面
  final Widget mainScreen;

  const SplashScreen({
    super.key,
    required this.imageUrls,
    required this.mainScreen,
  });

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  double _preloadProgress = 0.0;

  @override
  void initState() {
    super.initState();
    // 启动预加载流程
    _startImagePreload();
  }

  Future<void> _startImagePreload() async {
    int loadedCount = 0;
    for (final url in widget.imageUrls) {
      await DefaultCacheManager().getSingleFile(url);
      loadedCount++;
      // 更新进度，让用户看到加载状态
      setState(() {
        _preloadProgress = loadedCount / widget.imageUrls.length;
      });
    }
    // 预加载完成，跳转到主页面（注意判断页面是否还挂载）
    if (mounted) {
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (context) => widget.mainScreen),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 这里放你的启动页Logo或者品牌元素
            const Icon(Icons.photo_library, size: 120, color: Colors.blue),
            const SizedBox(height: 30),
            // 显示预加载进度条
            SizedBox(
              width: 200,
              child: LinearProgressIndicator(
                value: _preloadProgress,
                backgroundColor: Colors.grey[200],
                color: Colors.blue,
              ),
            ),
            const SizedBox(height: 15),
            Text(
              "正在准备图片... ${(_preloadProgress * 100).toInt()}%",
              style: const TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

第三步：修复代码里的缓存失效问题 #

看了你的代码，发现一个容易被忽略的坑：你在MySwiper的CachedNetworkImage里用了key: UniqueKey()，在MyStaggeredGridview的MasonryGridView.builder里也用了key: UniqueKey()。

UniqueKey()会让每次Widget重建时生成一个全新的key，这会导致Flutter认为这是一个新的Widget，即使图片链接没变，CachedNetworkImage也会重新初始化（虽然缓存还在，但可能会短暂显示占位符）。你需要把这些key换成稳定的、和图片链接绑定的key：

• 把MySwiper里的CachedNetworkImage的key改成：

  key: ValueKey(widget.imgUrls[index]),
  

• 把MyStaggeredGridview里的MasonryGridView.builder的UniqueKey()去掉，或者换成基于图片列表的key：

  key: ValueKey(widget.imgUrls),
  

这样相同的图片链接会对应稳定的Widget key，缓存能被正确复用，切换视图时图片会瞬间显示。

第四步：在主入口使用改造后的启动页 #

最后，在main函数里把你的图片链接列表传给启动页，让它在App启动时就开始预加载：

void main() {
  // 假设这是你所有需要展示的图片链接列表
  final List<String> allImageUrls = [
    "https://your-image-url-1.com",
    "https://your-image-url-2.com",
    // ... 其他图片链接
  ];

  runApp(MyApp(imageUrls: allImageUrls));
}

class MyApp extends StatelessWidget {
  final List<String> imageUrls;

  const MyApp({super.key, required this.imageUrls});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "图片展示App",
      home: SplashScreen(
        imageUrls: imageUrls,
        mainScreen: const YourMainScreen(), // 你的主页面，包含轮播和网格视图
      ),
    );
  }
}

这样操作后，用户打开App会看到启动页显示加载进度，预加载完成后进入主页面，不管是首屏轮播图还是切换到网格视图，图片都会瞬间从缓存读取，完全不会有加载等待的情况，完美解决你的问题！

内容来源于stack exchange