如何剪辑 BoxDecoration 内的溢出

Question

我想创建一个像 aCircleAvatar这样的小部件，当它溢出时会剪辑它的子级（CircleAvatar仅剪辑图像，而不是它的子级）。我可以强制 aBoxDecoration剪掉它的子元素（就像overflow: hidden在 CSS 中一样）吗？

考虑一下我有这些：

new Container(
  height: 50.0,
  alignment: Alignment.bottomCenter,
  decoration: new BoxDecoration(
    color: Colors.blue,
    border: new Border.all(),
    borderRadius: new BorderRadius.circular(25.0),
  ),
  child: new Container(
    color: Colors.orange,
    height: 20.0,
  ),
)

我希望橙色框包含在蓝色圆圈中。

Answer 1

有一个ClipOval类可以这样使用：

class ClipExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      backgroundColor: Colors.blueAccent,
      body: new Center(
        child: new CircleAvatar(
          backgroundColor: Colors.amberAccent,
                  child: new ClipOval(
            clipper:new MyClipper(),
                    child: new Container(
              color: Colors.red,

             height: 10.0,
            ),
          ),
        ),
      ),
    );
  }
}

class MyClipper extends CustomClipper<Rect>{
  @override
  Rect getClip(Size size) {
    return new Rect.fromCircle(center: new Offset(0.0,0.0),
      radius:  50.0
    );
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
    return false;
  }

}