正常情況闸餐，大家知道使用Container widget的BoxDecoration可以實現(xiàn)圓角功能，但是如果遇到比較復(fù)雜的布局的情況下，就不容易實現(xiàn)原來想要的效果了。比如下圖是設(shè)計師給的效果圖：
image.png
可以看到最上面車輛卡片是帶有圓角的焚志，這里實現(xiàn)是滾動效果是借助flutter_swiper插件實現(xiàn)，插件正常顯示卡片是沒有圓角效果畏鼓，如果這時想借助Container widget的BoxDecoration可以實現(xiàn)圓角功能的話酱酬，你會發(fā)現(xiàn)并不起作用，所以有沒有類似于css的overflow：hidden的widget呢實現(xiàn)裁剪功能呢云矫？答案就是這個widget了：PhysicalModel
使用方法直接看下面代碼：
Widget get _swiper {
return Container(
margin: EdgeInsets.only(top: 20.0),
padding: EdgeInsets.symmetric(horizontal: 20.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
// 實現(xiàn)陰影效果
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, //設(shè)置背景底色透明
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(),
),
)
),
);
}
代碼實現(xiàn)效果：
image.png
