BoxDecoration 裝飾器有以下屬性:
1.color 顏色 設(shè)置背景顏色 Colors.red
2.border 邊框
3.borderRadius 圓角
4.boxShadow 陰影
5.gradient 漸變
6.image 圖片
Color 顏色設(shè)置:
Colors.red 用這個(gè)方法來(lái)設(shè)置顏色。
Border 邊框設(shè)置:
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) ) 單邊設(shè)置
- border: Border.all(color: Colors.red,width: 20,style:BorderStyle.solid) //整體設(shè)置
- border: Border.fromBorderSide(borderSide) //通過(guò)borderSide 設(shè)置
4.border: Border.symmetric(vertical: BorderSide(width: 40,color: Colors.blue,style: BorderStyle.solid),horizontal: BorderSide(width: 50,color: Colors.red,style: BorderStyle.solid)),//對(duì)稱設(shè)置
BorderRadius 圓角設(shè)置:
- borderRadius:BorderRadius.all(Radius.circular(10)) //整體設(shè)置
2.borderRadius: BorderRadius.horizontal(left: Radius.circular(20),right:Radius.circular(10)) // 對(duì)稱設(shè)置
3.borderRadius: BorderRadius.vertical(top: Radius.circular(20),bottom: Radius.circular(40)),
4.BorderRadius.only 單腳設(shè)置
BoxShadow 陰影設(shè)置:
1.boxShadow: [BoxShadow(
color: Colors.grey, //陰影顏色
offset: Offset(10, 4), //偏移量
spreadRadius: 2,///陰影大小
blurRadius: 4,///陰影模糊大小
blurStyle: BlurStyle.normal //陰影風(fēng)格
)]
Gradient 漸變?cè)O(shè)置:
gradient: LinearGradient(///線性漸變
colors: [Colors.grey,Colors.red,Colors.green],//漸變顏色
begin: Alignment.bottomLeft, 開始位置
end: Alignment.centerRight, 結(jié)束位置
stops: [0.4,0.5,0.6] 要和顏色的數(shù)量一樣
)
gradient: RadialGradient(///環(huán)形漸變
// colors: [Colors.grey,Colors.red,Colors.green],
// radius: 5
// )
還有一種掃描漸變
Image 圖片設(shè)置:
image: DecorationImage(///顯示網(wǎng)絡(luò)圖片
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")), // 本地圖片