如何在Flutter中实现圆角图像

Question

我正在使用Flutter制作电影信息列表。现在我想让左侧的封面图片成为圆角图片。我尝试了以下方法，但没有起作用。谢谢！

    getItem(var subject) {
    var row = Container(
      margin: EdgeInsets.all(8.0),
      child: Row(
        children: <Widget>[
          Container(
            width: 100.0,
            height: 150.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              color: Colors.redAccent,
            ),
            child: Image.network(
              subject['images']['large'],
              height: 150.0,
              width: 100.0,
            ),
          ),
        ],
      ),
    );
    return Card(
      color: Colors.blueGrey,
      child: row,
    );
  }

如下所示

- Liu Silong

Answer 1

使用 ClipRRect 即可完美解决。

ClipRRect(
    borderRadius: BorderRadius.circular(8.0),
    child: Image.network(
        subject['images']['large'],
        height: 150.0,
        width: 100.0,
    ),
)

- Abdi Hamid

---

谢谢！我按照您的建议进行了操作，然后添加了 fit: BoxFit.fill，效果看起来非常不错。 - Liu Silong

谢谢 - 你有没有想过如何为clipRRect的图像创建彩色边框？ - iKK

将其放入一个Container中，并使用适当的border/borderRadius属性对其进行BoxDecoration修饰： decoration: BoxDecoration( borderRadius: BorderRadius.circular(3.0), border: Border.all(color: Colors.grey[300])), child: ClipRRect( borderRadius: BorderRadius.circular(3.0), child: Image.network( uri, fit: BoxFit.fill, width: imageDimension, height: imageDimension, ), ), )``` - Daniel Allen

感谢，小提示：仅适用于相同的宽度和高度。 - Álvaro Agüero

小提示：ClipRRect 和 ClipRect 很容易混淆，其中 ClipRect 没有 borderRadius。 - Konstantin Kozirev

Answer 2

1. 圆形图片（无边框）

• 使用CircleAvatar：

CircleAvatar(
  radius: 48, // Image radius
  backgroundImage: NetworkImage('imageUrl'),
)

使用ClipRRect：

ClipOval(
  child: SizedBox.fromSize(
    size: Size.fromRadius(48), // Image radius
    child: Image.network('imageUrl', fit: BoxFit.cover),
  ),
)

---

2. 圆形图片（带边框）

• 使用 CircleAvatar：

CircleAvatar(
  radius: 56,
  backgroundColor: Colors.red,
  child: Padding(
    padding: const EdgeInsets.all(8), // Border radius
    child: ClipOval(child: Image.network('imageUrl')),
  ),
)

使用ClipRRect：

Container(
  padding: EdgeInsets.all(8), // Border width
  decoration: BoxDecoration(color: Colors.red, shape: BoxShape.circle),
  child: ClipOval(
    child: SizedBox.fromSize(
      size: Size.fromRadius(48), // Image radius
      child: Image.network('imageUrl', fit: BoxFit.cover),
    ),
  ),
)

---

3. 圆角图片（无边框）

ClipRRect(
  borderRadius: BorderRadius.circular(20), // Image border
  child: SizedBox.fromSize(
    size: Size.fromRadius(48), // Image radius
    child: Image.network('imageUrl', fit: BoxFit.cover),
  ),
)

---

4. 圆角图片（带边框）

final borderRadius = BorderRadius.circular(20); // Image border

Container(
  padding: EdgeInsets.all(8), // Border width
  decoration: BoxDecoration(color: Colors.red, borderRadius: borderRadius),
  child: ClipRRect(
    borderRadius: borderRadius,
    child: SizedBox.fromSize(
      size: Size.fromRadius(48), // Image radius
      child: Image.network('imageUrl', fit: BoxFit.cover),
    ),
  ),
)

_{还有其他方法，例如使用DecoratedBox，但这会使答案变得过长。}

- CopsOnRoad

---

如果孩子的图像不是正方形，那么在这个解决方案中裁剪将会是椭圆形。 - Bilal Şimşek

你太完美了，兄弟！！！ - Nghien Nghien

Answer 3

你也可以使用Flutter自带的CircleAvatar

CircleAvatar(
  radius: 20,
  backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)

- onmyway133

---

这是最好的答案。我做了额外的 backgroundImage: member[index].picture == null ? Image(image: AssetImage('assests/no-image.png')) : NetworkImage( member[index].picture, - saviour123

@saviour123 并不是每个带圆角的图片都是“头像”。接受的答案是通用的。 - nipunasudha

这个部件无法设置高度或宽度，这是有问题的。 - papillon

Answer 4

试一下这个方法，对我很有效：

Container(
  width: 100.0,
  height: 150.0,
  decoration: BoxDecoration(
    image: DecorationImage(
        fit: BoxFit.cover, image: NetworkImage('Path to your image')),
    borderRadius: BorderRadius.all(Radius.circular(8.0)),
    color: Colors.redAccent,
  ),
),

- Faisal Kc

---

你的答案绝对有帮助，谢谢！但是如果容器中的内容不仅是图像而是一个部件，有什么想法吗？ - Oleksandr

使用这个程序会导致运行时错误。一个“堆栈”中有两个元素。第一个元素需要是带圆角的图像，我正在寻找答案。 - knkbga

这是最佳答案。应该在 ClipRRect 之前使用 Container 的边框属性，因为它会对处理器造成负担。如果您使用 Image.asset() 或 Image.network()，则无法在 Container 的图像属性中使用它们，因此您可以分别使用 AssetImage() 和 NetworkImage()。 - Maruf Hassan

Answer 5

使用CircleAvatar和CachedNetworkImage加载图像，尝试这个。

CircleAvatar(
  radius: 45,
  child: ClipOval(
    child: CachedNetworkImage(
      imageUrl:  "https:// your image url path",
      fit: BoxFit.cover,
      width: 80,
      height: 80,
    ),
  ),
),

2. 如果你也想要边框，那么添加如下：

backgroundColor: Colors.deepOrangeAccent,

里面的内容

CircleAvatar(
  radius: 45,
  backgroundColor: Colors.deepOrangeAccent,
  child: ClipOval(
    child: CachedNetworkImage(
      imageUrl: "https:// your image url path",
      fit: BoxFit.cover,
      width: 80,
      height: 80,
    ),
  ),
),

- shirsh shukla

Answer 6

   Container(
      width: 48.0,
      height: 48.0,
      decoration: new BoxDecoration(
        shape: BoxShape.circle,
        image: new DecorationImage(
            fit: BoxFit.fill,
            image: NetworkImage("path to your image")
        )
    )),

- simhachalam

Answer 7

这是我使用过的代码。

Container(
  width: 200.0,
  height: 200.0,
  decoration: BoxDecoration(
    image: DecorationImage(image: NetworkImage('Network_Image_Link')),
    color: Colors.blue,
    borderRadius: BorderRadius.all(Radius.circular(25.0)),
  ),
),

谢谢!!!

- Anuj Choudhary

Answer 8

使用此图像

ClipOval(
    child: Image.network(
        'https://url to your image',
        fit: BoxFit.fill,
    ),
);

对于资产图像，请使用此选项

ClipOval(
    child: Image.asset(
        'Path to your image',
        fit: BoxFit.cover,
    ),
)

- ikben

Answer 9

您可以像这样使用ClipRRect：

  Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(25),
                    child: Image.asset(
                      'assets/images/pic13.jpeg',
                      fit: BoxFit.cover,
                    ),
                  ),
                )

你可以设置你的半径，或者仅用于左上角或左下角，例如：

你可以设置你的半径，或者仅用于左上角或左下角，例如：

Padding(
              padding: const EdgeInsets.all(8.0),
              child: ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(25)
                ,bottomLeft: Radius.circular(25)),
                child: Image.asset(
                  'assets/images/pic13.jpeg',
                  fit: BoxFit.cover,
                ),
              ),
            )

- Sana Ebadi

---

这个对我起作用了！ - Pixie Dust

Answer 10

使用新版本的Flutter和Material主题，您需要使用“Padding”小部件，以便拥有不填充其容器的图像。

例如，如果您想在AppBar中插入一个圆形图像，则必须使用padding，否则您的图像将始终与AppBar一样高。

希望这能帮助到某些人。

InkWell(
        onTap: () {
            print ('Click Profile Pic');
        },
        child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ClipOval(
                child: Image.asset(
                    'assets/images/profile1.jpg',
                ),
            ),
        ),
    ),

- PatrickGhara