在 Flutter 中创建圆形缓存图像答案

【问题标题】：Create rounded cached image in Flutter在 Flutter 中创建圆形缓存图像
【发布时间】：2018-11-29 09:20:40
【问题描述】：

我想创建一个圆形图像，该图像是从网络中获取的，并且还缓存在 Flutter 中。

这是我从网络上获取的圆形图像的代码，但该图像没有被缓存。

new Container(
    width:80.0,
    height: 80.0,
    decoration: new BoxDecoration(
    shape: BoxShape.circle,
        image: new DecorationImage(
            image: new NetworkImage('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
        ),
    ),
),

现在我找到了一个用于从网络中获取、缓存和呈现图像的小部件

new CachedNetworkImage(imageUrl: 'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg')

但是当我用这个 CachedNetworkImage 替换 NetworkImage 小部件时，它给了我一个错误，说 NetworkImage 不是类型图像。

如何实现可以缓存的圆形图片？

编辑：我按照答案中的建议尝试了此操作，但仍然遇到相同的错误：无法将参数类型“CachedNetworkImage”分配给参数类型“DecorationImage”。

              decoration: new BoxDecoration(
                shape: BoxShape.circle,
                image: new CachedNetworkImage(image: 
                      'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
              ),

【问题讨论】：

标签： dart flutter

【解决方案1】：

CachedNetworkImage 有一个构建器 (ImageWidgetBuilder) 可以进一步自定义图像的显示。试试这个方法：

CachedNetworkImage(
  imageUrl: 'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg',
  imageBuilder: (context, imageProvider) => Container(
    width: 80.0,
    height: 80.0,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      image: DecorationImage(
        image: imageProvider, fit: BoxFit.cover),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

placeholder 和 errorWidget 是小部件，这意味着您可以将任何小部件放入其中并根据需要自定义它们。

【讨论】：

此解决方案将仅适用于方形图片，否则 CircularProgressIndicator 将与图片具有相同的比例。

【解决方案2】：

DecorationImage 接受 ImageProvider 而不是 widget。

有两种方法可以解决这个问题：

cached_image_network 提供了一个class 即extends ImageProvider，即CachedNetworkImageProvider：

Container(
  width: 80.0,
  height: 80.0,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      image: CachedNetworkImageProvider('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
    ),
  ),
)

您也可以省略 DecorationImage 小部件，因为BoxDecoration 将在任何小部件上工作：

Container(
  width: 80.0,
  height: 80.0,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
  ),
  child: CachedNetworkImage('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
)

在后一个示例中，我使用的是常规 CachedNetworkImage，它将返回一个 小部件。

【讨论】：

感谢您的回答！我尝试了你的两个答案；第一个工作，但后一个例子没有工作......仍然得到同样的错误：参数类型'CachedNetworkImage'不能分配给参数类型'DecorationImage'。
@creativecreatormaybenot 我实际上确实按照您在编辑中告诉我的方式复制了它，但仍然没有工作。
@dshukertjr 是的，我搞砸了，我搞砸了。您需要将CachedNetworkImage 作为child 传递给Container。我在答案中更新了。
@creativecreatormaybenot 谢谢！现在一切正常！
这不适用于矩形图像。即使fit: BoxFit.cover

【解决方案3】：

ClipOval 小部件用于将子小部件剪辑成圆形。

ClipOval(
  child: CachedNetworkImage(imageUrl: "https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg",
   width: 80.0,
   height: 80.0,
  ),
)

【讨论】：

而不是使用 ClipRRect（它基本上用于圆角矩形），您可能应该使用 ClipOval
这不适用于矩形图像，即使是fit: BoxFit.cover
@aytunch 如果您可以将代码发布到堆栈溢出，我将很高兴看到您的代码
这是公认的答案！ ClipOval 看起来不像是一个完美的圆圈！
@SamersSalib 当你的宽度和高度相等时，它会。

【解决方案4】：

CircleAvatar 和 CachedNetworkImageProvider 的组合可以解决您的问题。这是一个例子：

CircleAvatar(
  backgroundImage: CachedNetworkImageProvider(
  'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg',
  ),
),

【讨论】：

【解决方案5】：

在我的情况下，这可以节省我的时间，我也是。

CachedNetworkImage(
  imageUrl: url,
  errorWidget: (context, url, error) => Text("error"),
  imageBuilder: (context, imageProvider) => CircleAvatar(
    radius: 50,
    backgroundImage: imageProvider,
   ),
  );

【讨论】：

【解决方案6】：

它可以通过使用Container 和ClipRRect 来工作。这是一个例子：

Container(
  width: 160,
  height: 160,
    child: ClipRRect(
      borderRadius: BorderRadius.circular(80),
      child: CachedNetworkImage(
        fit: BoxFit.cover,
        imageUrl: '[YOUR URL]',
        errorWidget: (
          context,
          url,
          error,
        ) =>
          const Icon(Icons.error),
        progressIndicatorBuilder: (
          context,
          url,
          downloadProgress,
        ) =>
          Center(
            child: CircularProgressIndicator(
              value: downloadProgress.progress),
            ),
          )
      ),
    ),

Container 小部件的 width 和 height 很重要，两者应该相同。

我希望这对其他人有用;-)

【讨论】：

【解决方案7】：

一种通用解决方案，适用于任意尺寸和圆角半径的图片：

Container(
   width: 100,
   height: 125,
   decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(34.0),
      color: Colors.grey,
   ),
   child: ClipRRect(
      borderRadius: BorderRadius.circular(34.0),
      child: CachedNetworkImage(
         imageUrl: "url",
         fit: BoxFit.cover,
         placeholder: (context, url) => Center(
            child: SizedBox(
               width: 40.0,
               height: 40.0,
               child: new CircularProgressIndicator(),
            ),
         ),
         errorWidget: (context, url, error) => new Icon(Icons.error),
      ),
   ),
),

【讨论】：