在学习过程中发现,*Material组件中添加borderRadiu然后使用Stack添加图片,当图片的填充方式为BoxFit.cover时,图片会把圆角覆盖掉,也就是会溢出。
我们可以使用Contain组件的decoration来实现容器的圆角以及图片的渲染,如下
class SliverListDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Padding(
padding: EdgeInsets.only(bottom: 32.0),
child: new Material(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
elevation: 14.0,
shadowColor: Colors.grey.withOpacity(0.5),
child: Container(
width: 300.00,
height: 200.00,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(posts[index].imageUrl),
fit: BoxFit.cover),
borderRadius: BorderRadius.circular(12.0),
),
child: Stack(
children: <Widget>[
Positioned(
top: 32.0,
left: 32.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
posts[index].title,
style: TextStyle(
fontSize: 20.0, color: Colors.white),
),
Text(
posts[index].author,
style: TextStyle(
fontSize: 13.0, color: Colors.white),
),
],
),
),
],
),
)),
);
},
childCount: posts.length,
),
);
}
}
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。