预取 CachedNetworkImage 显示的图像

Question

Flutter 的

CachedNetworkImage

几乎是神奇的，但如果他们提供一种在显示图像之前下载图像的方法，那就更好了。我想在一个屏幕中下载图像并使用

CachedNetworkImage

在另一个屏幕中显示它们。如果预取尝试失败，

CachedNetworkImage

应像往常一样运行，下载并缓存图像。

Flutter中有没有常用的预取图片的方式？

Answer 1

您可以使用

precacheImage

将图像添加到 flutter 的图像缓存中。

precacheImage(CachedNetworkImageProvider(imgaeUrl), context)

Ps：我在移动设备上，当我访问我的系统时，我将对其进行编辑和格式化。

Answer 2

像下面的代码一样预缓存CachedNetworkImage

Image myImage;
bool _loading = true;

@override
void initState() {
myImage = Image(
  image: CachedNetworkImageProvider("http://via.placeholder.com/350x150"),
);
myImage.image
    .resolve(ImageConfiguration())
    .addListener(ImageStreamListener((_, __) {
  if (mounted) {
    setState(() {
      _loading = false;
    });
  }
}));
super.initState();
}

  @override
  void didChangeDependencies() {
  super.didChangeDependencies();
  precacheImage(myImage.image, context);
 }

并使用 myImage 作为 Widget。 _loading 告诉您图像是否已加载。

Answer 3

基于使用

ImageStreamListener

和

Image

+

CachedNetworkImageProvider

的答案，您可以添加一个漂亮的小扩展来处理不同的状态。

extension ImageLoadingCallback on Image {
  void whenState({
    Function(ImageInfo)? hasImage,
    Function(Object, StackTrace?)? hasError,
  }) {
    image.resolve(const ImageConfiguration()).addListener(ImageStreamListener(
          (imageInfo, _) {
            if (hasImage != null) hasImage(imageInfo);
          },
          onError: (exception, stackTrace) {
            if (hasError != null) hasError(exception, stackTrace);
          },
        ));
  }
}

那就这样称呼吧

final image = Image(
  image: CachedNetworkImageProvider(
    imageUrl,
  ),
);

image.whenState(
  hasImage: (_) {
    if (mounted) {
      setState(() =>_loading = false);
    }
  },
);