请选择 进入手机版 | 继续访问电脑版

Fulutter 设置圆角背景图片&Container 设置边框、圆角、阴影

[复制链接]
云韵 发表于 2020-12-31 19:00:25 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
Fulutter 设置圆角配景图片&Container 设置边框、圆角、阴影

  在 Flutter 中,如何实现配景图片呢?又如何实现带圆角的配景图片呢?
Fulutter 设置圆角配景图片

使用 Container 的 decoration 可以很方便的设置一个容易组件配景图片的圆角巨细:
  1. Container(          decoration: ShapeDecoration(            image: new DecorationImage(              //设置配景图片              image: AssetImage("assets/images/task_icon.jpg"),              fit: BoxFit.cover,            ),            //设置圆角            shape:RoundedRectangleBorder(borderRadius: BorderRadiusDirectional.circular(20)),          ),          //设置边距          margin: EdgeInsets.only(top: 16, left: 20, right: 20),          child: new Card(            color: Colors.transparent,         ……)
复制代码
使用 Container 设置边框、圆角、阴影

如果我们想设置一个容器组件的边框、圆角以及阴影怎么办呢?
实现代码:
  1. Container(          decoration: BoxDecoration(            //设置边框            border: new Border.all(color: Color(0xFFFF0000), width: 0.5),            //配景颜色            color: Colors.white,             //设置圆角            borderRadius: new BorderRadius.circular((5.0)),             //设置阴影            boxShadow: [BoxShadow(color: Colors.lightGreen, offset: Offset(1.0, 1.0), blurRadius: 1.0, spreadRadius: 1.0), ],          ),)
复制代码
**PS:更多出色内容,请检察 --> 《Flutter 开辟》
**PS:更多出色内容,请检察 --> 《Flutter 开辟》
**PS:更多出色内容,请检察 --> 《Flutter 开辟》

来源:https://blog.csdn.net/u011578734/article/details/111935344
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )