如何以正确的方式缓存图像

Question

我使用 CachedNetworkImage 包来显示图像的加载，但我想我用错了，因为在加载进度消失后，图像直到几秒钟才出现。

这是我的 CachedNetworkImage 代码

CachedNetworkImage(
            imageUrl: movie.poster.toString(),
            imageBuilder: (context, _) {
              return Image.network(
                movie.poster.toString(),
                height: 250,
                width: 164,
                fit: BoxFit.fill,
                alignment: Alignment.topCenter,
              );
            },
            placeholder: (context, url) => Container(
              height: 250,
              width: 164,
              child: Center(
                child: CircularProgressIndicator(
                  color: Colors.blue,
                ),
              ),
            ),
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),

Answer 1

发生这种情况是因为您要返回一个 Image.network，它会再次加载图像，所以您会得到这个延迟的图像。

用这个替换您的缓存网络图像。

CachedNetworkImage(
    imageUrl: movie.poster.toString(),
    imageBuilder: (context, imageProvioder) {
      return Container(
        decoration: BoxDecoration(
          image: DecorationImage(image: imageProvioder, fit: BoxFit.fill),
        ),
      );
    },
    placeholder: (context, url) => Container(
      height: 250,
      width: 164,
      child: Center(
        child: CircularProgressIndicator(
          color: Colors.blue,
        ),
      ),
    ),
    errorWidget: (context, url, error) => Icon(Icons.error),
  ),

希望对您有所帮助。

如何以正确的方式缓存图像

How to cached image the right way

dart

flutter