flutter空间-BoxDecoration 装饰器

BoxDecoration 装饰器有以下属性:
1.color 颜色 设置背景颜色 Colors.red
2.border 边框
3.borderRadius 圆角
4.boxShadow 阴影
5.gradient 渐变
6.image 图片

Color 颜色设置:
Colors.red 用这个方法来设置颜色。

Border 边框设置:
1.border: Border(top: BorderSide(width: 15,color: Colors.red),right: BorderSide(width: 5,color: Colors.blue),left: BorderSide(width: 5,color: Colors.yellow),bottom: BorderSide(width: 5,color: Colors.green) ) 单边设置

  1. border: Border.all(color: Colors.red,width: 20,style:BorderStyle.solid) //整体设置
  2. border: Border.fromBorderSide(borderSide) //通过borderSide 设置
    4.border: Border.symmetric(vertical: BorderSide(width: 40,color: Colors.blue,style: BorderStyle.solid),horizontal: BorderSide(width: 50,color: Colors.red,style: BorderStyle.solid)),//对称设置

BorderRadius 圆角设置:

  1. borderRadius:BorderRadius.all(Radius.circular(10)) //整体设置
    2.borderRadius: BorderRadius.horizontal(left: Radius.circular(20),right:Radius.circular(10)) // 对称设置
    3.borderRadius: BorderRadius.vertical(top: Radius.circular(20),bottom: Radius.circular(40)),
    4.BorderRadius.only 单脚设置

BoxShadow 阴影设置:
1.boxShadow: [BoxShadow(
color: Colors.grey, //阴影颜色
offset: Offset(10, 4), //偏移量
spreadRadius: 2,///阴影大小
blurRadius: 4,///阴影模糊大小
blurStyle: BlurStyle.normal //阴影风格
)]

Gradient 渐变设置:
gradient: LinearGradient(///线性渐变
colors: [Colors.grey,Colors.red,Colors.green],//渐变颜色
begin: Alignment.bottomLeft, 开始位置
end: Alignment.centerRight, 结束位置
stops: [0.4,0.5,0.6] 要和颜色的数量一样
)
gradient: RadialGradient(///环形渐变
// colors: [Colors.grey,Colors.red,Colors.green],
// radius: 5
// )
还有一种扫描渐变

Image 图片设置:
image: DecorationImage(///显示网络图片
image: NetworkImage('https://lmg.jj20.com/up/allimg/4k/s/02/2109250006343S5-0-lp.jpg'),
fit: BoxFit.cover
)
image: DecorationImage(image: AssetImage("assets/images/game.png")), // 本地图片

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容