Flutter将圆形遮罩到容器中。

Question

Flutter将圆形遮罩到容器中。

androidflutterskia

10

我想在一个容器上添加圆形效果，但是我希望圆形不会扩展容器的尺寸，而是被容器裁剪。这就是我想要实现的效果：

如您所见，白色的圆形自然会扩展到红色容器外，但我想让它留在边框内。我该如何做？

- Fabrizio

2个回答

7

ClipRRect对我来说效果最好。

参考视频： https://www.youtube.com/watch?v=eI43jkQkrvs&vl=en

ClipRRect(
  borderRadius: BorderRadius.cirular(10),
  child: myContainerWithCircleWidget,
);

- Travis M.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rmtmckenzie · Accepted Answer

最简单的方法是使用“overlap”和“cliprect”。

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,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

< p >OverFlowBox 允许圆形图形绘制在其父级范围之外，cliprect 将其裁剪回边缘。

仅供参考 - 在我的设备上，我在白色圆圈的顶部和底部看到了一条微小的红线。我相当确定这是Flutter中最近引入的错误，因为如果我在容器周围添加一个白色边框，我也会看到类似的情况。我已经在github上发表问题。