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替换NetworkImage小部件时，它给我一个错误，指出NetworkImage不是图像类型。

如何获得可以缓存的圆形图像？

编辑：我按照答案中的建议进行了尝试，但仍然遇到相同的错误：无法将参数类型'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，而不是 widget 。

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

cached_image_network提供了一个class extends的{{1}}，即 ImageProvider ：< / p>

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 将在 any 小部件上起作用

BoxDecoration

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

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'),
          )

我希望这可以解决您的问题

Answer 5

CircleAvatar和CachedNetworkImageProvider的组合解决了您的问题。这是一个示例：

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

Answer 6

就我而言，这节省了我的时间，也可能是您。

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

在Flutter中创建舍入的缓存图像

6 个答案: