如何獲得容器的圓角？

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