Flutter PageView加载高清图片内存持续增长的解决方法

问题根源 #

默认情况下，PageView会预加载相邻页面的内容，加上直接加载未压缩的高清原图，每一张图都会占用大量内存，滑动过程中所有加载过的图片都会保留在内存中，最终导致内存占用飙升至1.7GB。

解决方案 #

1. 限制PageView预加载页面数量 #

通过设置PageView.builder的cacheExtent参数，控制预加载的页面范围。设置为0时，只会保留当前显示的页面，减少同时驻留在内存中的图片数量：

PageView.builder(
  cacheExtent: 0, // 仅缓存当前页面
  itemCount: urls.length,
  // ... 其他配置
)

2. 压缩图片尺寸 #

不要加载原图，而是根据设备屏幕尺寸压缩图片。使用Image.network的cacheWidth和cacheHeight参数，让Flutter加载适配屏幕的缩小版图片，大幅降低单张图片的内存占用：

final screenWidth = MediaQuery.of(context).size.width;
Image.network(
  urls[index],
  cacheWidth: screenWidth.toInt(), // 匹配屏幕宽度
  cacheHeight: (screenWidth * 1.5).toInt(), // 按比例设置高度，可根据布局调整
  fit: BoxFit.cover,
)

3. 优化图片缓存策略 #

如果需要更精细化的缓存管理，可以利用Flutter官方的图片缓存机制，或者借助第三方库（如cached_network_image）自动管理缓存的清理与复用，避免无效内存占用。

修改后的完整代码 #

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> urls = [
    "https://unsplash.com/photos/Eelegt4hFNc/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjc1NzA4NTgy&force=true",
    "https://unsplash.com/photos/MI9AqYWeM24/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjc1NzA4Njk1&force=true",
    "https://unsplash.com/photos/kFHz9Xh3PPU/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjc1NzA3NDU3&force=true",
    "https://unsplash.com/photos/_AjqGGafofE/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjc1Njg0MDMx&force=true",
    "https://unsplash.com/photos/8Qr1ixi-rMU/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjc1NzA0NTkx&force=true",
    "https://unsplash.com/photos/xaZSE0h7yIY/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjc1NzA4MTY1&force=true",
    "https://unsplash.com/photos/RbRWDUyDEWQ/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjc1NzA4NzY5&force=true",
    "https://unsplash.com/photos/HJCywuQqKYY/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjc1NzA4Nzcx&force=true"
  ];

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: PageView.builder(
        cacheExtent: 0,
        itemCount: urls.length,
        itemBuilder: (context, index) {
          return Image.network(
            urls[index],
            cacheWidth: screenWidth.toInt(),
            cacheHeight: (screenWidth * 1.5).toInt(),
            fit: BoxFit.cover,
          );
        },
      ),
    );
  }
}

效果说明 #

• 压缩图片后，单张图片的内存占用会从原图的数百MB降至几十MB甚至更低
• 限制预加载后，内存中只会保留当前页面的图片，滑动时旧页面的图片会被及时回收
• 经过上述优化，滑动完所有图片后的内存占用会大幅降低，通常可控制在几百MB以内

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