首页 文章

在Flutter中创建圆角缓存图像

提问于
浏览 次
4

我想创建一个圆形图像，从网络中提取图像，并在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

2 回答

  • 0

    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 将适用于 any 小部件：

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

    回复于
  • 5

    ClipRRect小部件用于将子小部件剪辑为圆角 .

    ClipRRect(
  borderRadius: BorderRadius.circular(40.0),
  child: CachedNetworkImage(imageUrl: "https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg",
   width: 80.0,
   height: 80.0,
  ),
)
    回复于

相关问题