前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >FlutterSliverList圆角图片

FlutterSliverList圆角图片

原创
作者头像
徐建国
修改2021-08-02 17:39:10
修改2021-08-02 17:39:10
1.2K00
代码可运行
举报
文章被收录于专栏:个人路线个人路线
运行总次数:0
代码可运行

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

换种方法

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

代码语言:javascript
代码运行次数:0
运行
复制
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 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 换种方法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档