Flutter PageView.builder页面未销毁引发内存溢出崩溃如何解决

算力阿峰

2026-9-30

问题核心原因

高分辨率图片未做降采样处理，单张原始图片解码后内存占用可达几十甚至上百MB，Flutter全局图片缓存默认不会主动及时清理大体积的非活跃图片，内存随滑动持续上涨；
PageView默认开启隐式滚动缓存，会保留已加载过的页面实例，超出可视范围的页面没有被及时销毁。

解决方案

1. 强制图片降采样，从源头降低内存占用

给FileImage指定cacheWidth和cacheHeight，按照屏幕实际显示需要的分辨率解码，不要加载全尺寸原始图片：

// 计算和屏幕分辨率匹配的解码尺寸，避免加载冗余像素
final screenSize = MediaQuery.of(context).size;
final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
// 最大缩放比例如果超过1，可对应放大系数，比如支持2倍缩放就乘以2
final maxCacheWidth = (screenSize.width * devicePixelRatio).round();
final maxCacheHeight = (screenSize.height * devicePixelRatio).round();

2. 配置PageView仅保留当前可视页，销毁超出范围的页面

给PageView添加两个配置，禁用多余页面缓存：

PageView.builder(
  clipBehavior: Clip.hardEdge,
  physics: const BouncingScrollPhysics(),
  itemBuilder: (context, index) => GalleryCustomChild(image: viewModel.images[index]),
  itemCount: viewModel.images.length,
  controller: viewModel.pageController,
  // 新增配置开始
  cacheExtent: 0, // 禁用预加载缓存范围
  allowImplicitScrolling: false, // 禁用隐式滚动的页面保活
  // 新增配置结束
)

配置完成后，超出可视范围的页面会被立刻销毁，不会保留在内存中。

3. 页面销毁时主动清理对应图片缓存

将GalleryCustomChild改为Stateful组件，在dispose生命周期主动清理当前页的图片缓存，释放内存：

class GalleryCustomChild extends StatefulWidget {
  final ImageData image;

  const GalleryCustomChild({required this.image, Key? key}) : super(key: key);

  @override
  State<GalleryCustomChild> createState() => _GalleryCustomChildState();
}

class _GalleryCustomChildState extends State<GalleryCustomChild> {
  late FileImage _imageProvider;

  @override
  void initState() {
    super.initState();
    final screenSize = MediaQuery.of(context).size;
    final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
    final maxCacheWidth = (screenSize.width * devicePixelRatio).round();
    final maxCacheHeight = (screenSize.height * devicePixelRatio).round();
    _imageProvider = FileImage(
      File(widget.image.filePath),
      cacheWidth: maxCacheWidth,
      cacheHeight: maxCacheHeight,
    );
  }

  @override
  void dispose() {
    // 主动清除当前页面的图片缓存
    PaintingBinding.instance.imageCache.evict(_imageProvider);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return PhotoView(
      minScale: PhotoViewComputedScale.contained,
      maxScale: PhotoViewComputedScale.covered,
      initialScale: PhotoViewComputedScale.contained,
      backgroundDecoration: const BoxDecoration(color: Colors.black),
      imageProvider: _imageProvider,
    );
  }
}

4. 可选：限制全局图片缓存上限

在应用启动时主动设置全局图片缓存的最大内存阈值，避免缓存无限增长：

void main() {
  // 限制全局图片缓存最大为50MB，可根据业务场景调整
  PaintingBinding.instance.imageCache.maximumSizeBytes = 50 * 1024 * 1024;
  runApp(const MyApp());
}

按上述步骤配置后，内存会稳定在当前显示页（可选加前后1页缓存）的占用水平，不会随着滑动持续上涨触发崩溃。

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