使用 CachedNetworkImage 时应用程序崩溃答案

【问题标题】：Application crashes when using CachedNetworkImage使用 CachedNetworkImage 时应用程序崩溃
【发布时间】：2022-10-18 21:33:38
【问题描述】：

在列表视图中使用 CachedNetworkImage 时应用程序崩溃。如果有很多图片，则应用程序会冻结并崩溃。是否可以异步加载每个图像？我可以有一个代码示例吗？谢谢。

【问题讨论】：

你好，可以分享一下你试过的吗？任何代码 sn-p ？
一次有多少项目加载到您的列表中？
@ZakariaHossain 整个列表。如何限制它？
如果您的列表很大，例如您有一个包含 500 个图像的列表，并尝试将此列表除以页数（例如除以 30）并获取分页数据。

标签： flutter dart

【解决方案1】：

所以，如果你和我有同样的问题，并且你有很多图片，那么你可以执行以下操作：

1.启用ListView分页。这样滚动时，不会加载整个ListView，而是仅加载来自List 的10 个项目。

2.使用以下参数将图片压缩到所需大小： memCacheWidth, memCacheHeight, maxHeightDiskCache, maxWidthDiskCache

这是我的例子：

CachedNetworkImage(
    memCacheWidth: 45,
    memCacheHeight: 60,
    maxHeightDiskCache: 60,
    maxWidthDiskCache: 45,
    imageUrl: imageUrl,
    imageBuilder: (context, imageProvider) => imageBuilderWidget(imageProvider),
    placeholder: (context, url) => placeholderWidget(),
    errorWidget: (context, url, error) => errorWidget(),
  );

添加这些选项后，从模拟器中删除应用程序并做一个flutter clean

【讨论】：

【解决方案2】：

如果需要缓存图片使用Opt imised cached image包。这个包解决了同样的问题。如果不工作改变图像的宽度，如果可能的话添加分页

【讨论】：

【解决方案3】：

您可以使用 Image.network，它解决了我在 IOS 上的崩溃问题。

Image.network('https://example.com/image.jpg',
                      errorBuilder: (context, error, stackTrace) {
                        print(error); //do something
                      },
      loadingBuilder: (context, Widget child,
                          ImageChunkEvent loadingProgress) {
                        if (loadingProgress == null) return child;
                        return Center(
                          child: CircularProgressIndicator(
                            value: loadingProgress.expectedTotalBytes != null
                                ? loadingProgress.cumulativeBytesLoaded /
                                    loadingProgress.expectedTotalBytes
                                : null,
                          ),
                        );
                      },
                    ),

【讨论】：