CachedNetworkImage 的颤振占位符答案

【问题标题】：Flutter placeholder for CachedNetworkImageCachedNetworkImage 的颤振占位符
【发布时间】：2021-07-14 17:40:59
【问题描述】：

我正在使用cached_network_image 包来显示图像并在加载时使用占位符。以下是我遇到的错误以及我使用CachedNetworkImage 的小部件。

The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider<Object>'

        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(3),
          image: DecorationImage(
            image: CachedNetworkImage(
              imageUrl: "https://cdn....${item.id}/${item.imageName}.jpg",
              imageBuilder: (context, imageProvider) => Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: imageProvider,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              placeholder: (context, url) => CircularProgressIndicator(),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
            fit: BoxFit.cover,
          ),
        ),

搜索了一下，我在这个 Github 线程中发现了类似的问题，并且一个答案解释了 CachedNetworkImage 提供了一个回调，我可以使用它来返回图像提供程序。我试过那个例子，但仍然有这个错误。

https://github.com/Baseflow/flutter_cached_network_image/issues/177#issuecomment-510359079

我注意到 Github 线程中的问题有 The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider'. 错误，而我的是 The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider<Object>'.

谁能告诉我我做错了什么。

【问题讨论】：

CNI(...,child:Container)
图片加载后会渲染小部件

标签： flutter

【解决方案1】：

CachedNetworkImage 需要包裹在 Widget 要渲染的外面

删除

Container(...,
decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(3),
      image: DecorationImage(
        image:

保持

CachedNetworkImage(
          imageUrl: "https://cdn....${item.id}/${item.imageName}.jpg",
          imageBuilder: (context, imageProvider) => Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: imageProvider,
                fit: BoxFit.cover,
              ),
            ),
          ),
          placeholder: (context, url) => CircularProgressIndicator(),
          errorWidget: (context, url, error) => Icon(Icons.error),
        ),
        fit: BoxFit.cover,
      ),

因为参数类型'CachedNetworkImage'不能分配给参数image是Container中的'ImageProvider'类型

【讨论】：

【解决方案2】：

不要在装饰图像中使用 cached_network_image 而是直接使用它或作为容器的子级，您可以在 cached_network_image 的图像构建器属性中自定义图像。

原因：cached_network_image 不是一种 Imageprovider 小部件。

【讨论】：