FlutterSliverList圆角图片

在学习过程中发现，*Material组件中添加borderRadiu然后使用Stack添加图片，当图片的填充方式为BoxFit.cover时，图片会把圆角覆盖掉，也就是会溢出。

换种方法

我们可以使用Contain组件的decoration来实现容器的圆角以及图片的渲染，如下

代码语言：javascript复制

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,
      ),
    );
  }
}
​

flutter

0 人点赞