flutter空间-BoxDecoration 装饰器

2023-08-09  本文已影响0人  张果果灬

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")), // 本地图片

上一篇下一篇

猜你喜欢

热点阅读