
在学习过程中发现,*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 删除。