Flutter Network Image不适合圆形头像

Question

我试图从api中检索一堆图像.我希望图像以圆形形式显示,所以我使用CircleAvatarWidget,但我一直在以方形格式获取图像.这是图像的屏幕截图

这是我正在使用的代码

ListTile(leading: CircleAvatar(child: Image.network("${snapshot.data.hitsList[index].previewUrl}",fit: BoxFit.scaleDown,)),),

我tryied使用的所有属性BoxFit一样cover,contain,fitWidth,fitHeight等,但他们没有工作.

Answer 1

这将工作:你需要使用backgroundImage:属性,以使其适合Circle.

CircleAvatar(
                radius: 30.0,
                backgroundImage:
                    NetworkImage("${snapshot.data.hitsList[index].previewUrl}"),
                backgroundColor: Colors.transparent,
              )

要使用虚拟占位符进行检查:

CircleAvatar(
                radius: 30.0,
                backgroundImage:
                    NetworkImage('https://via.placeholder.com/150'),
                backgroundColor: Colors.transparent,
              )

Answer 2

在这种情况下，您可以使用：

CircleAvatar(
  radius: 50.0,
  backgroundImage: NetworkImage("https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"),
)

或者

CircleAvatar(
  radius: 50.0,
  backgroundImage: AssetImage("assets/images/profile.jpg"),
)

正常工作...

Answer 3

AppBar操作小部件列表中存在类似的问题。

这为我工作：

CircleAvatar(
    radius: 18,
    child: ClipOval(
        child: Image.network(
          'image-url',
        ),
    ),
),

Answer 4

backgroundImage只需在里面使用CircleAvatar

 CircleAvatar(
      backgroundImage: AssetImage("assets/images/dia.jpg",),
    ),

Answer 5

如果有人打算创建带边框的圆形图像，试试这个。

使用ClipOval小部件并不是完美的解决方案，因为如果图像不是正方形，结果将是椭圆形的。

CircleAvatar(radius: (52),
            backgroundColor: Colors.white,
            child: ClipRRect(
              borderRadius:BorderRadius.circular(50),
              child: Image.asset("assets/pictures/profile.png"),
            )
        )

ClipRRect小部件防止图像溢出CircleAvatar小部件。

Answer 6

如果您不想使用CircleAvatar，请按以下步骤操作。

ClipOval(
  child: Image.network(
    'https://via.placeholder.com/150',
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
),

Answer 7

您将需要使用NetworkImage，AssetImage，FileImage，MemoryImage或类似的东西。由于 Flutter 构建其图像类的方式Image.network，您不能直接使用,Image.asset或类似的。

一个例子：

CircleAvatar(
  radius: 100.0,
  backgroundImage: NetworkImage(...),
)

backgroundImageinCircleAvatar期望接收一个ImageProvider作为参数。然而，Image.network和其他人不直接扩展ImageProvider类，他们只是扩展StatefulWidget类，即使他们NetworkImage在内部使用。这就是您在其他答案中看到ClipOval或ClipRRect正在使用的原因。这些类接受 a Widget，因此它们不像CircleAvatar类似的类那样特殊。

因此，代替这些变通方法，对于CircleAvatar，您应该使用NetworkImage和类似的类，对于只需要 的小部件Widget，您可以使用Image.network和类似的。

不使用剪辑的另一个原因是它们可能比直接更改边框半径更昂贵：https : //flutter.dev/docs/perf/rendering/best-practices

Answer 8

这对我有用

   CircleAvatar(
                  child:  ClipRRect(
                      borderRadius: new BorderRadius.circular(100.0),
                      child:Image.network("http://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"),
                ),),

Answer 9

如果有人尝试在应用栏操作中添加圆形图像。尝试下面的解决方案它应该有效。

         Padding(
            padding: const EdgeInsets.all(8.0),
            child: AspectRatio(
              aspectRatio: 1,
              child: CircleAvatar(
                backgroundImage: NetworkImage('https://picsum.photos/seed/picsum/200/500'),

              ),
            ),
          )

AspectRatio 首先尝试布局约束（此处为应用栏）允许的最大宽度。如果我删除填充图像半径将是应用栏大小。因此添加padding来控制圆形图像的大小。

Answer 10

将 CircleAvatar 小部件包裹在 Stack 小部件下。

 return Stack(
      children: [
        CircleAvatar(
          radius: 50.0,
          backgroundImage: NetworkImage(
              'https://i.pinimg.com/474x/0c/eb/c3/0cebc3e2a01fe5abcff9f68e9d2a06e4.jpg'),
        ),
      ],
    );

Answer 11

 CircleAvatar(
        radius: 26,
        backgroundColor: Colors.white,
        child: ClipOval(
          child: _bytesImage == null
              ? new Text('No image value.')
              : Image.memory(
                  _bytesImage,
                  width: 60,
                  height: 60,
                  fit: BoxFit.cover,
                ),
        ),
      ),