Dart 如何修剪盒子内的溢出装饰
我想创建一个小部件,比如Dart 如何修剪盒子内的溢出装饰,dart,flutter,Dart,Flutter,我想创建一个小部件,比如CircleAvatar,当它溢出时,它会剪辑它的子对象(CircleAvatar只剪辑图像,而不是它的子对象)。我可以强制一个BoxDecoration剪辑它的子对象(比如css中的overflow:hidden)吗 考虑到我有这些: new Container( height: 50.0, alignment: Alignment.bottomCenter, decoration: new BoxDecoration( color: Colors.
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,
),
)
我希望橙色框包含在蓝色圆圈中。有一个类可以这样使用:
class ClipExample扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
归还新脚手架(
背景颜色:Colors.blueAccent,
正文:新中心(
孩子:新CircleAvatar(
背景颜色:Colors.amberAccent,
孩子:新的斜坡(
clipper:新的MyClipper(),
子容器:新容器(
颜色:颜色,红色,
身高:10.0,
),
),
),
),
);
}
}
类MyClipper扩展了CustomClipper{
@凌驾
Rect getClip(大小){
从圆返回新的矩形(中心:新的偏移量(0.0,0.0),
半径:50.0
);
}
@凌驾
bool shouldReclip(CustomClipper oldClipper){
返回false;
}
}
谢谢!我将getClip
更改为returnnewrect.fromLTWH(0.0,0.0,size.width,size.height)代码>。我认为这更容易理解。
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;
}
}