第JetpackCompose修飾符專項(xiàng)精講目錄1.常用修飾符2.修飾符順序本篇開(kāi)始介紹JetpackCompose中的修飾符Modifier。修飾符可以用來(lái)執(zhí)行以下操作：

更改可組合項(xiàng)的大小、布局、行為和外觀。添加信息，如無(wú)障礙標(biāo)簽。處理用戶輸入。添加高級(jí)互動(dòng)，如使元素可點(diǎn)擊、可滾動(dòng)、可拖動(dòng)或可縮放。

1.常用修飾符

下面先介紹一些常用的方法：

alpha(alpha:Float)：設(shè)置透明度，范圍0到1。background(color:Color,shape:Shape)：設(shè)置背景色，shape可以指定形狀，例如可以使用RoundedCornerShape來(lái)指定圓角大小。對(duì)于背景是漸變的，可以使用background(brush:Brush,shape:Shape,alpha:Float)。其中Brush就是我們指定漸變，例如使用horizontalGradient創(chuàng)建水平方向漸變：

Box(Modifier.background(

Brush.horizontalGradient(

listOf(Color.Red,Color.Green)

).size(100.dp))

當(dāng)然，還可以指定開(kāi)始結(jié)束的位置，顏色的分散偏移量，這里就不多說(shuō)了。

Modifier.border(width:Dp,color:Color,shape:Shape)，添加邊框，可以指定顏色、粗細(xì)和形狀。Modifier.clickable()，添加點(diǎn)擊事件。參數(shù)如下：

Modifier.clickable(

enabled:Boolean=true,//是否可點(diǎn)擊狀態(tài)，默認(rèn)可點(diǎn)擊

onClickLabel:String=null,//語(yǔ)義/可訪問(wèn)性標(biāo)簽

role:Role=null,//點(diǎn)擊元素的類型，例如Button、Checkbox、Image等。用于可訪問(wèn)性服務(wù)。

onClick:()-Unit//點(diǎn)擊事件

如果不考慮AndroidTalkBack讀屏這類功能，一般情況下使用就是Modifier.clickable{}

MbinedClickable()與上面的點(diǎn)擊事件一樣，只是它還支持長(zhǎng)按，雙擊事件。Modifier.onFocusChanged()，監(jiān)聽(tīng)焦點(diǎn)變化事件。Modifier.focusable()，設(shè)置焦點(diǎn)。Modifier.height(height:Dp)，設(shè)置高度，同理width設(shè)置寬度。Modifier.requiredHeight(height:Dp)，強(qiáng)制設(shè)置高度，可以忽略父元素的寬高限制。requiredWidth同理。舉一個(gè)小例子：

Box(Modifier.requiredSize(100.dp)

.background(Color.Red)

Box(Modifier.width(50.dp)

.height(150.dp)

.background(Color.Blue)

}

一個(gè)100dp100dp的紅色方塊內(nèi)有個(gè)50dp150dp的藍(lán)色方塊。如果我們把height換為requiredHeight。

Box(Modifier.requiredSize(100.dp)

.background(Color.Red)

Box(Modifier.width(50.dp)

.requiredHeight(150.dp)

.background(Color.Blue)

對(duì)比一下前后效果，一目了然。

Modifier.heightIn(min:Dp,max:Dp)，設(shè)置高度的最大最小值。widthIn同理。Modifier.size(size:Dp)，可同時(shí)設(shè)置寬高。requiredSize、sizeIn與上面的同理。Modifier.padding(all:Dp)，元素的邊添加間隔，也就是常說(shuō)的內(nèi)間距。Modifier.rotate(degrees:Float)，設(shè)置旋轉(zhuǎn)度數(shù)。Modifier.scale(scaleX:Float,scaleY:Float)，設(shè)置縮放，如果是負(fù)數(shù)可以實(shí)現(xiàn)鏡像效果。Modifier.horizontalScroll()，允許子元素在寬度大于最大限制時(shí)垂直滾動(dòng)。例如我們給Row添加它，這樣在超出屏幕寬度后，我們就可以水平方向滾動(dòng)了。verticalScroll同理。

Row(Modifier.horizontalScroll(rememberScrollState())){

Box(

Modifier.size(5000.dp,100.dp)

.background(Color.Blue)

Modifier.fillMaxHeight(fraction:Float=1f)，高度上填充滿父元素，參數(shù)fraction指填充的比例。fillMaxWidth，fillMaxSize同理。示例：

Box(Modifier.requiredSize(100.dp).background(Color.Blue)){

Box(

Modifier.fillMaxWidth(0.8f)

.fillMaxHeight(0.5f)

.background(color=Color.Yellow)

效果如下：

Modifier.wrapContentSize(align:Alignment,unbounded:Boolean)，看這個(gè)名字，相信你就會(huì)聯(lián)想起wrap_content，它允許內(nèi)容以其所需的大小進(jìn)行測(cè)量，會(huì)忽略最小寬度或最小高度的約束。如果unbounded為true，也會(huì)忽略最大寬高的約束，默認(rèn)為false。align是指定子元素相對(duì)父元素的對(duì)齊方式，默認(rèn)居中。

看個(gè)例子：

Box(Modifier.requiredSize(200.dp).background(Color.Blue)){

Box(

Modifier.sizeIn(minWidth=140.dp,minHeight=140.dp)

.wrapContentSize(Alignment.TopStart)

.size(70.dp)

.background(Color.Yellow)

外層是個(gè)200dp*200dp的藍(lán)色方塊，內(nèi)部是最小寬高140dp的黃色方塊。由于設(shè)置了wrapContentSize，此時(shí)size(70.dp)就生效了，成為了70dp的黃色方塊。下圖是使用wrapContentSize前后的對(duì)比圖。

同樣的例子，我們看一下unbounded屬性的作用。外層是個(gè)200dp*200dp的藍(lán)色方塊，內(nèi)部是最大寬高140dp的黃色方塊。現(xiàn)在我們?cè)O(shè)置size為170dp

Box(Modifier.requiredSize(200.dp).background(Color.Blue)){

Box(

Modifier.sizeIn(maxWidth=140.dp,maxHeight=140.dp)

.wrapContentSize(Alignment.TopStart,true)

.size(170.dp)

.background(Color.Yellow)

下圖分別是unbounded為true和false的效果圖：

2.修飾符順序

修飾符函數(shù)的順序非常重要。每個(gè)函數(shù)都會(huì)對(duì)上一個(gè)函數(shù)返回的Modifier進(jìn)行更改。

上面介紹了一些常用的修飾符，不知道你有沒(méi)有注意到，有提到padding，為啥沒(méi)見(jiàn)margin？其實(shí)就是因?yàn)樾揎椃捻樞?，不同的順序?huì)實(shí)現(xiàn)padding和margin效果。這塊我就直接照搬文檔的例子了，很直觀。

@Composable

funArtistCard(/*...*/){

valpadding=16.dp

Column(

Modifier

.clickable(onClick=onClick)

.padding(padding)

.fillMaxWidth()

//restoftheimplementation

先clickable后padding：

可以看到點(diǎn)擊范圍就是整個(gè)卡片，然后卡片的內(nèi)容四周有16dp的間隔，實(shí)現(xiàn)的效果就是padding。

如果先padding后clickable：

@Composable

funArtistCard(/*...*/){

valpadding=16.dp

Column(

Modifier

.padding(padding)

.clickable(onClick=onClick)

.fillMaxWidth()

//restoftheimplementation

效果如下：

可以看到效果就是margin。

再舉一個(gè)例子，就是我們上面說(shuō)到的wrapContentSize。注意我們當(dāng)時(shí)的使用順序：

Box(Modifier.requiredSize(200.dp).background(Color.Blue)){

Box(

Modifier.sizeIn(minWidth=140.dp,minHeight=140.dp)

.wrapContentSize(Alignment.TopStart)

.size(70.dp)

.background(Color.Yellow)

如果wrapContentSiz