如何在BoxDecoration

Question

我想创建一个像CircleAvatar这样的小部件，当它的子节点溢出时剪切它的子节点（CircleAvatar只剪切图像，而不是它的子节点）。我可以强制BoxDecoration剪辑其子节点（如css中的overflow: hidden）吗？

考虑一下我有这些：

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

}