本篇開始介紹Jetpack Compose 中的修飾符Modifier。修飾符可以用來執(zhí)行以下操作：

• 更改可組合項的大小、布局、行為和外觀。
• 添加信息，如無障礙標簽。
• 處理用戶輸入。
• 添加高級互動，如使元素可點擊、可滾動、可拖動或可縮放。

1.常用修飾符

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

• alpha(alpha: Float)：設(shè)置透明度，范圍0到1。
• background(color: Color, shape: Shape?)：設(shè)置背景色，shape可以指定形狀，例如可以使用RoundedCornerShape來指定圓角大小。
• 對于背景是漸變的，可以使用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)然，還可以指定開始結(jié)束的位置，顏色的分散偏移量，這里就不多說了。

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

Modifier.clickable(
    enabled: Boolean = true, // 是否可點擊狀態(tài)，默認可點擊
    onClickLabel: String? = null, // 語義/可訪問性標簽
    role: Role? = null, // 點擊元素的類型，例如Button、Checkbox、Image等。用于可訪問性服務(wù)。
    onClick: () -> Unit // 點擊事件
)

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

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

	Box(Modifier.requiredSize(100.dp)
        .background(Color.Red)
    ) {
        Box(Modifier.width(50.dp)
            .height(150.dp)
            .background(Color.Blue)
        )
    }

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

	Box(Modifier.requiredSize(100.dp)
        .background(Color.Red)
    ) {
        Box(Modifier.width(50.dp)
            .requiredHeight(150.dp)
            .background(Color.Blue)
        )
    }

對比一下前后效果，一目了然。

• Modifier.heightIn(min: Dp, max: Dp )，設(shè)置高度的最大最小值。widthIn同理。
• Modifier.size(size: Dp)，可同時設(shè)置寬高。requiredSize、sizeIn與上面的同理。
• Modifier.padding(all: Dp)，元素的邊添加間隔，也就是常說的內(nèi)間距。
• Modifier.rotate(degrees: Float)，設(shè)置旋轉(zhuǎn)度數(shù)。
• Modifier.scale(scaleX: Float, scaleY: Float)，設(shè)置縮放，如果是負數(shù)可以實現(xiàn)鏡像效果。
• Modifier.horizontalScroll()，允許子元素在寬度大于最大限制時垂直滾動。例如我們給Row添加它，這樣在超出屏幕寬度后，我們就可以水平方向滾動了。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?)，看這個名字，相信你就會聯(lián)想起wrap_content，它允許內(nèi)容以其所需的大小進行測量，會忽略最小寬度或最小高度的約束。如果unbounded為true，也會忽略最大寬高的約束，默認為false。align是指定子元素相對父元素的對齊方式，默認居中。

看個例子：

	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)
        )
    }

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

同樣的例子，我們看一下unbounded屬性的作用。外層是個200dp*200dp的藍色方塊，內(nèi)部是最大寬高140dp的黃色方塊?，F(xiàn)在我們設(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ù)的順序非常重要。每個函數(shù)都會對上一個函數(shù)返回的 Modifier 進行更改。

上面介紹了一些常用的修飾符，不知道你有沒有注意到，有提到padding，為啥沒見margin？其實就是因為修飾符的順序，不同的順序會實現(xiàn)padding和margin效果。這塊我就直接照搬文檔的例子了，很直觀。

@Composable
fun ArtistCard(/*...*/) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        // rest of the implementation
    }
}

先clickable后padding：

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

如果先padding后clickable：

@Composable
fun ArtistCard(/*...*/) {
    val padding = 16.dp
    Column(
        Modifier
            .padding(padding)
            .clickable(onClick = onClick)
            .fillMaxWidth()
    ) {
        // rest of the implementation
    }
}

效果如下：

可以看到效果就是margin。

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

	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)
        )
    }

如果wrapContentSize和size順序反過來，那就不會顯示黃色的方塊了，因為首先它忽略了之前設(shè)置的最小寬高，然后內(nèi)容大小后面沒有設(shè)置了，所以就看不到了。記住開始的那句話，每個修飾符函數(shù)都會對上一個函數(shù)返回的 Modifier 進行更改。

所以在實際的使用中，不僅需要了解修飾符的作用，同樣需要注意修飾符的順序。

那么到這里有關(guān)修飾符的部分就完了，下一篇就是常用組件的介紹。如果本篇對你有幫助，希望點個贊支持一下~

參考： 官方文檔 - 修飾符

到此這篇關(guān)于Jetpack Compose修飾符專項精講的文章就介紹到這了,更多相關(guān)Jetpack Compose修飾符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論