flutter空間-BoxDecoration 裝飾器

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è)置

  1. border: Border.all(color: Colors.red,width: 20,style:BorderStyle.solid) //整體設(shè)置
  2. 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ì)稱(chēng)設(shè)置

BorderRadius 圓角設(shè)置:

  1. borderRadius:BorderRadius.all(Radius.circular(10)) //整體設(shè)置
    2.borderRadius: BorderRadius.horizontal(left: Radius.circular(20),right:Radius.circular(10)) // 對(duì)稱(chēng)設(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, 開(kāi)始位置
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")), // 本地圖片

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容