dart - 如何在 BoxDecoration 中剪辑溢出

Question

我想创建一个像 CircleAvatar 这样的小部件，当它溢出时会剪辑它的 child (CircleAvatar 只剪辑图像，而不是它的 child )。我可以强制 BoxDecoration 剪裁其子项(如 overflow: hidden in 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;
  }

}