在Flutter中创建圆角缓存图像

Question

我想创建一个圆形图像，从网络中提取图像，并在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替换网络图像小部件时，它给我一个错误，说网络图像不是类型图像。

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

编辑：我按照答案中的建议尝试了这个，但仍然得到了同样的错误：参数类型'CachedNetworkImage'无法分配给参数类型'DecorationImage'。

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

Answer 1

DecorationImage采取ImageProvider而不是小部件。

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

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，它将返回一个小部件。

Answer 2

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

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

Answer 3

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是小部件，这意味着您可以在其中放置任何小部件并根据需要自定义它们。

Answer 4

您可以使用CircleAvatar小部件在Flutter中创建圆角图像。下面是它的示例代码。

new CircleAvatar(
            backgroundImage: NetworkImage(
                'https://randomuser.me/api/portraits/women/21.jpg'),
          )

我希望这能解决你的问题