如何获得容器的圆角？

Question

我试图制作一个带有圆角的card。我试图在borderRadius中添加Container，而Container的子级是图像，但是我没有得到圆角。我只有在删除Image属性时才能获得它们。我怎么了预先感谢！

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(80)),
  ),
  child: Image.asset('images/Bild1.jpg'),
)

Answer 1

解决方案1：

Container(
  clipBehavior : Clip.antiAlias,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(80)),
  ),
  child: Image.asset('images/Bild1.jpg'),
)

解决方案2：

Container(
  clipBehavior : Clip.antiAlias,
  decoration: BoxDecoration(
    shape: BoxShape.circle
  ),
  child: Image.asset('images/Bild1.jpg'),
)

解决方案3：

Material(
  shape: CircleBorder(),
  child: Image.asset('images/Bild1.jpg'),
)

解决方案4：

CircleAvatar(
  backgroundImage: AssetImage('images/Bild1.jpg'),
)

Answer 2

使用类别ClipRRect，它将您的边缘修剪到所需的半径：

child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(80)),
       ),
       child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(80)),
        child: Image.asset('images/Bild1.jpg'),
      ),
    );

Answer 3

如果您只需要Container的decoration用于剪辑，则应使用CircleAvatar

CircleAvatar(
  backgroundImage: AssetImage('images/Bild1.jpg'),
  radius: 80,
)

或简单地将Container替换为ClipRRect

ClipRRect(
  borderRadius: BorderRadius.all(Radius.circular(80)),
  child: Image.asset('images/Bild1.jpg'),
)

或使用ClipOval

ClipOval(
  child: Image.asset('images/Bild1.jpg'),
)