Jetpack Compose 從入門到入門（三）

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

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

1.常用修飾符

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

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

	Box(Modifier.background(
        Brush.horizontalGradient(
            listOf(Color.Red, Color.Green)
        )
    ).size(100.dp))

當然，還可以指定開始結束的位置，顏色的分散偏移量，這里就不多說了，

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

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

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

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

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

一個100dp100dp的紅色方塊內有個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 )，設定高度的最大最小值，widthIn同理，
• Modifier.size(size: Dp)，可同時設定寬高，requiredSize、sizeIn與上面的同理，
• Modifier.padding(all: Dp)，元素的邊添加間隔，也就是常說的內間距，
• Modifier.rotate(degrees: Float)，設定旋轉度數，
• Modifier.scale(scaleX: Float, scaleY: Float)，設定縮放，如果是負數可以實作鏡像效果，
• Modifier.horizontalScroll()，允許子元素在寬度大于最大限制時垂直滾動，例如我們給Row添加它，這樣在超出螢屏寬度后，我們就可以水平方向滾動了，verticalScroll同理，

	Row(Modifier.horizontalScroll(rememberScrollState())) {
		Box(
			Modifier.size(5000.dp, 100.dp)
       			.background(Color.Blue)
    	)
	}

• Modifier.fillMaxHeight(fraction: Float = 1f)，高度上填充滿父元素，引數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?)，看這個名字，相信你就會聯想起wrap_content，它允許內容以其所需的大小進行測量，會忽略最小寬度或最小高度的約束，如果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的藍色方塊，內部是最小寬高140dp的黃色方塊，由于設定了wrapContentSize，此時size(70.dp)就生效了，成為了70dp的黃色方塊，下圖是使用wrapContentSize前后的對比圖，

同樣的例子，我們看一下unbounded屬性的作用，外層是個200dp*200dp的藍色方塊，內部是最大寬高140dp的黃色方塊，現在我們設定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.修飾符順序

修飾符函式的順序非常重要，每個函式都會對上一個函式回傳的 Modifier 進行更改，

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

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

先clickable后padding：

可以看到點擊范圍就是整個卡片，然后卡片的內容四周有16dp的間隔，實作的效果就是padding，

如果先padding后clickable：

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

效果如下：

可以看到效果就是margin，

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

	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順序反過來，那就不會顯示黃色的方塊了，因為首先它忽略了之前設定的最小寬高，然后內容大小后面沒有設定了，所以就看不到了，記住開始的那句話，每個修飾符函式都會對上一個函式回傳的 Modifier 進行更改，

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

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

參考：

• 官方檔案 - 修飾符