如何获得容器的圆角？

Question

我试着制作一张圆角的card 。 我试图在Container中添加borderRadius ， 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

使用 class 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,
)

或者干脆用ClipRRect替换Container

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

或使用ClipOval

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