Flutter中PageView用DecorationImage加载图片出现延迟问题求助

问题描述 #

我在PageView组件中使用DecorationImage作为背景图片。当图片数量为5张及以上时，向左滑动切换页面会短暂显示背景色，之后才加载出对应页面的图片；若图片数量为4张及以下，则不会出现此问题。

复现代码 #

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
          checkerboardRasterCacheImages: true,
          title: 'Problem Images',
          home: ProblemWidget()),
    );
  }
}

class ProblemWidget extends StatefulWidget {
  @override
  State<ProblemWidget> createState() => _ProblemWidgetState();
}

class _ProblemWidgetState extends State<ProblemWidget> {
  @override
  Widget build(BuildContext context) {
    List<ImageProvider> images = [
      const AssetImage('assets/images/0.jpg'),
      const AssetImage('assets/images/1.jpg'),
      const AssetImage('assets/images/2.jpg'),
      const AssetImage('assets/images/3.jpg'),
      const AssetImage('assets/images/4.jpg'),
      const AssetImage('assets/images/5.jpg'),
      const AssetImage('assets/images/6.jpg'),
      const AssetImage('assets/images/7.jpg'),
    ];

    // images.removeRange(2, images.length); // uncommenting this image makes the problem disappear

    return PageView.builder(
      controller: PageController(
        viewportFraction: 0.9999, // HACK to ensure preload of next page
        initialPage: 0,
      ),
      itemBuilder: (BuildContext context, int index) {
        return Scaffold(
          body: Stack(
            children: [
              Container(
                clipBehavior: Clip.hardEdge,
                width: MediaQuery.of(context).size.width * MediaQuery.of(context).devicePixelRatio,
                height: MediaQuery.of(context).size.height * MediaQuery.of(context).devicePixelRatio,
                decoration: BoxDecoration(image: DecorationImage(image: images[index % images.length], fit: BoxFit.cover)),
              ),
            ],
          ),
        );
      },
    );
  }
}

问题原因 #

• 图片缓存溢出：Flutter默认图片缓存的内存阈值有限，当图片数量超过4张后，预加载的图片会挤掉之前的缓存，向左滑动时需要重新解码加载已被移除的图片，导致短暂显示背景色。
• 错误的尺寸计算：手动将容器宽高乘以devicePixelRatio，导致图片渲染尺寸远大于实际显示区域，大幅增加内存占用，加速缓存溢出。
• 不必要的重构建：每次build都重新创建ImageProvider列表，干扰了Flutter的缓存逻辑，降低了缓存命中率。
• 预加载hack的副作用：viewportFraction: 0.9999会强制PageView加载更多页面，进一步加剧了缓存压力。

解决方法 #

1. 修正容器尺寸 #

移除多余的devicePixelRatio计算，Flutter会自动处理像素适配：

Container(
  clipBehavior: Clip.hardEdge,
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  decoration: BoxDecoration(image: DecorationImage(image: images[index % images.length], fit: BoxFit.cover)),
)

2. 提前预加载图片 #

在initState中预加载所有图片到缓存，避免滑动时临时加载：

class _ProblemWidgetState extends State<ProblemWidget> {
  final List<ImageProvider> images = [
    const AssetImage('assets/images/0.jpg'),
    const AssetImage('assets/images/1.jpg'),
    const AssetImage('assets/images/2.jpg'),
    const AssetImage('assets/images/3.jpg'),
    const AssetImage('assets/images/4.jpg'),
    const AssetImage('assets/images/5.jpg'),
    const AssetImage('assets/images/6.jpg'),
    const AssetImage('assets/images/7.jpg'),
  ];

  @override
  void initState() {
    super.initState();
    // 预加载所有图片
    for (final image in images) {
      precacheImage(image, context);
    }
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: PageController(initialPage: 0),
      // ...其他代码
    );
  }
}

3. 移除预加载hack #

删除viewportFraction: 0.9999，依赖PageView默认的预加载逻辑（前后各1页），减少不必要的缓存消耗。

4. 调整图片缓存阈值（可选） #

如果仍有缓存问题，可以全局增大图片缓存的最大数量：

void main() {
  // 设置最大缓存图片数量，按需调整
  PaintingBinding.instance.imageCache.maximumSize = 20;
  runApp(const MyApp());
}

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