正常情况，大家知道使用Container widget的BoxDecoration可以实现圆角功能，但是如果遇到比较复杂的布局的情况下，就不容易实现原来想要的效果了。比如下图是设计师给的效果图：
image.png
可以看到最上面车辆卡片是带有圆角的，这里实现是滚动效果是借助flutter_swiper插件实现，插件正常显示卡片是没有圆角效果，如果这时想借助Container widget的BoxDecoration可以实现圆角功能的话，你会发现并不起作用，所以有没有类似于css的overflow：hidden的widget呢实现裁剪功能呢？答案就是这个widget了：PhysicalModel
使用方法直接看下面代码：
Widget get _swiper {
return Container(
margin: EdgeInsets.only(top: 20.0),
padding: EdgeInsets.symmetric(horizontal: 20.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
// 实现阴影效果
offset: Offset(0.0, 16.0),
color: Color.fromRGBO(140,140,140,0.2),
blurRadius: 8.0,
spreadRadius: -9.0,
),
]
),
child: PhysicalModel(
color: Colors.transparent, //设置背景底色透明
borderRadius: BorderRadius.circular(12),
clipBehavior: Clip.antiAlias, //注意这个属性
child: Container(
height: 160,
child: Swiper(
itemBuilder: (BuildContext context, int index){
return Container(
child: Text('卡片${index}'),
color: Colors.yellow,
);
},
itemCount: 3,
pagination: new SwiperPagination(),
),
)
),
);
}
代码实现效果：
image.png
