我想在容器上添加一个圆形效果,但是我希望该圆形不扩展容器的尺寸,而是被容器剪裁。这是我要实现的目标:
如您所见,白色圆圈自然会扩展红色容器,但相反,我试图使其保持在边界内。我该怎么做?
最简单的方法是使用重叠和裁剪。
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将其切回边缘。
仅供参考- 在我的设备上,我在白色圆圈的顶部和底部出现一条细小的红线。我相当确定这是最近出现的抖动问题,因为如果在容器周围放置白色边框,也会看到类似的现象。为此,我在github上提出了一个问题。