最佳答案
最简单的方法是使用重叠和剪裁。
class OverlapSquare extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.red,
),
child: ClipRect(
clipBehavior: Clip.hardEdge,
child: OverflowBox(
maxHeight: 250,
maxWidth: 250,
child: Center(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
),
),
),
),
);
}
}
OverFlowBox 允许圆圈在其父级边界之外绘制,然后 cliprect 将其切回到边缘。
仅供引用 - 在我的设备上,我在白色圆圈的顶部和底部看到一条细小的红线。我相当确定这是最近在 flutter 中引入的错误,因为如果我在容器周围放置一个白色边框,我也会看到类似的情况。我养了an issue on github为此。
关于android - Flutter mask 一个圆圈变成一个容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53639066/