Flutter仅当前会话生效的图片缓存方案咨询

针对你遇到的歌曲封面重复请求、又不想持久化本地缓存的问题，以下是几个会话级内存缓存的最优方案：

方案1：调整Flutter原生ImageCache配置 #

Flutter自带的ImageCache本身就是内存级缓存，应用关闭后自动销毁，只是默认缓存容量较小，可能导致页面切换时缓存被清理。你可以在应用启动时调大缓存上限，让封面图片能保留在内存中：

void main() {
  // 设置最大缓存图片数量为100张，最大缓存字节数为100MB
  PaintingBinding.instance.imageCache.maximumSize = 100;
  PaintingBinding.instance.imageCache.maximumSizeBytes = 100 << 20;
  runApp(const MyApp());
}

之后直接使用NetworkImage即可，Flutter会自动帮你在内存中缓存图片，页面切换时不会重复请求，直到缓存满了或者内存紧张时被系统回收。

方案2：自定义内存缓存管理器 #

如果需要更灵活的缓存控制，可以自己实现一个单例的内存缓存类，手动管理图片字节：

import 'dart:typed_data';
import 'package:http/http.dart' as http;

class ImageMemoryCache {
  static final ImageMemoryCache _instance = ImageMemoryCache._();
  factory ImageMemoryCache() => _instance;
  ImageMemoryCache._();

  final Map<String, Uint8List> _cacheStore = {};

  Future<Uint8List?> fetchImage(String url) async {
    // 先从缓存取
    if (_cacheStore.containsKey(url)) {
      return _cacheStore[url];
    }
    // 缓存没有则请求网络
    try {
      final response = await http.get(Uri.parse(url));
      if (response.statusCode == 200) {
        final bytes = response.bodyBytes;
        _cacheStore[url] = bytes;
        return bytes;
      }
    } catch (e) {
      // 处理网络请求错误，比如返回null或默认图
    }
    return null;
  }

  // 可选：手动清空缓存（比如用户退出登录时）
  void clearCache() {
    _cacheStore.clear();
  }
}

在页面中使用时，通过FutureBuilder加载内存中的图片：

FutureBuilder<Uint8List?>(
  future: ImageMemoryCache().fetchImage(song.coverUrl),
  builder: (context, snapshot) {
    if (snapshot.hasData && snapshot.data != null) {
      return Image.memory(snapshot.data!);
    }
    // 加载中或出错时显示占位图
    return const Icon(Icons.music_note, size: 60);
  },
)

方案3：基于flutter_cache_manager实现临时缓存 #

如果你想继续使用CachedNetworkImage的功能（比如占位图、错误图），可以用flutter_cache_manager自定义一个仅内存存储的缓存管理器：

首先添加依赖：

dependencies:
  flutter_cache_manager: ^3.3.1

然后实现临时缓存管理器：

import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:flutter_cache_manager/src/storage/memory_file_system.dart';

class TempCacheManager extends CacheManager {
  static const _cacheKey = 'session_only_cache';
  static TempCacheManager? _instance;

  factory TempCacheManager() {
    _instance ??= TempCacheManager._internal();
    return _instance!;
  }

  TempCacheManager._internal()
      : super(
          Config(
            _cacheKey,
            maxNrOfCacheObjects: 100,
            // 使用内存文件系统，不写入本地存储
            fileSystem: MemoryFileSystem(),
            // 设置过期时间为0，确保不会持久化
            stalePeriod: Duration.zero,
          ),
        );
}

最后在CachedNetworkImage中使用这个管理器：

CachedNetworkImage(
  imageUrl: song.coverUrl,
  cacheManager: TempCacheManager(),
  placeholder: (context, url) => const CircularProgressIndicator(),
  errorWidget: (context, url, error) => const Icon(Icons.error),
)

方案对比 #

• 方案1：零额外依赖，配置简单，适合快速解决问题，但缓存策略由Flutter自动管理，内存紧张时可能被回收。
• 方案2：完全自定义，缓存逻辑可控性强，但需要手动处理网络请求和缓存维护。
• 方案3：兼容CachedNetworkImage的所有特性，无需自己写网络请求，但需要引入第三方库。

无论选择哪个方案，都要根据你的应用内存情况合理设置缓存上限，避免内存溢出。

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