缩放的容器重叠父小部件抖动

Question

我如何使这个蓝色圆圈不与绿色框重叠，而是被限制在绿色框的内部边界内？

代码：

Container(
  width: 300,
  height: 100,
  color: Colors.green,
  child: Transform.scale(
     scale: 2,
     child: Container(
        decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.blue
        ),
     ),
  ),
),

图片告诉其他人：

已经谢谢

-Tobias

Answer 1

我可以在clipBehaviour属性上使用带有hardEdge的ClipRect小部件来做到这一点。

Center(
    child: Container(
      width: 300,
      height: 100,
      color: Colors.green,
      child: ClipRect(
        clipBehavior: Clip.hardEdge,
        child: Transform.scale(
          scale: 2,
          child: Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    ),
  ),