一尘不染

颤动将一个圆圈蒙版到容器中

flutter

我想在容器上添加一个圆形效果,但是我希望该圆形不扩展容器的尺寸,而是被容器剪裁。这是我要实现的目标:
在此处输入图片说明

如您所见,白色圆圈自然会扩展红色容器,但相反,我试图使其保持在边界内。我该怎么做?


阅读 251

收藏
2020-08-13

共1个答案

一尘不染

最简单的方法是使用重叠和裁剪。

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上提出了一个问题

2020-08-13