Flutter 将一个圆圈掩入容器中答案

【问题标题】：Flutter mask a circle into a containerFlutter 将一个圆圈掩入容器中
【发布时间】：2019-05-07 10:07:24
【问题描述】：

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

如您所见，白色圆圈自然会扩展红色容器，但相反，我试图让它留在边界内。我该怎么做？

【问题讨论】：

【解决方案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 将其切回边缘。

仅供参考 - 在我的设备上，白色圆圈的顶部和底部出现一条细小的红线。我相当确定这是最近在颤振中引入的错误，因为如果我在容器周围放置一个白色边框，我也会看到类似的东西。我为此提出了an issue on github。

【讨论】：

成功了！谢谢！！，但只是作为旁注。如果我没有放入 maxHeight 和 maxWidth 的大小，但我想将它们限制为父级的大小，我该怎么办？
抱歉 - 我不太明白。如果你希望它是父母的大小，你不需要剪裁吗？话虽如此，请查看LayoutBuilder，因为它可能就是您要查找的内容。
如果我需要将白色容器放在左侧居中，我该怎么办？
您应该能够使用带有适当对齐集的对齐而不是使用中心。

【解决方案2】：

ClipRRect 最适合我。

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

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

【讨论】：