Flutter中CachedNetworkImage返回页面时图片重复加载问题求助

1. 修复控制器重复初始化问题 #

当前列表页每次进入都会通过Get.put()重新创建控制器，触发onInit重新拉取数据，导致列表因数据源重置而重建，进而引发图片重复加载。

修改步骤：

• 在路由配置或全局初始化阶段，用Get.lazyPut()注册单例控制器：

// 示例：在main.dart或路由初始化处添加
Get.lazyPut(() => LatestProductsController());

• 在列表页获取控制器时改用Get.find()，避免重复实例化：

// 替换原有的Get.put(LatestProductsController());
final controller = Get.find<LatestProductsController>();

2. 为CachedNetworkImage设置稳定缓存Key #

取消注释cacheKey，用「产品ID+图片URL」作为唯一缓存标识，确保即使widget重建，也能直接读取本地缓存，避免重复发起网络请求。

修改代码：

CachedNetworkImage(
  cacheKey: "${controller.products[index]["id"]}_$imageUrl", // 新增稳定缓存Key
  imageUrl: imageUrl,
  placeholder: (context, url) => Image.asset(
    AppImageAssets.logo,
    fit: BoxFit.cover,
  ),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

3. 开启页面状态保持 #

让列表页保持状态，避免从详情页返回时重建整个页面，减少不必要的widget重建操作。

实现方式：
让列表页的State类混入AutomaticKeepAliveClientMixin：

class ProductsListPage extends StatefulWidget {
  @override
  _ProductsListPageState createState() => _ProductsListPageState();
}

class _ProductsListPageState extends State<ProductsListPage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 开启状态保持

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用super.build，否则状态保持不生效
    return Scaffold(
      // 你的列表页面内容
    );
  }
}

4. 优化缓存策略（可选） #

如果服务器返回的图片未设置合适的缓存头，可自定义缓存管理器延长缓存有效期：

import 'package:flutter_cache_manager/flutter_cache_manager.dart';

// 自定义缓存管理器
final productImageCacheManager = CacheManager(
  Config(
    'product_images_cache',
    stalePeriod: Duration(days: 7), // 缓存有效期7天
    maxNrOfCacheObjects: 1000, // 最大缓存1000张图片
  ),
);

// 在CachedNetworkImage中使用
CachedNetworkImage(
  cacheKey: "${controller.products[index]["id"]}_$imageUrl",
  imageUrl: imageUrl,
  cacheManager: productImageCacheManager, // 使用自定义缓存管理器
  placeholder: (context, url) => Image.asset(
    AppImageAssets.logo,
    fit: BoxFit.cover,
  ),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

内容的提问来源于stack exchange，提问作者jon snow