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) ) 单边设置
- border: Border.all(color: Colors.red,width: 20,style:BorderStyle.solid) //整体设置
- 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 圆角设置:
- 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")), // 本地图片
网友评论