Jetpack Compose Modifier用法详解，如何保证高可用

Card(elevation = 4.dp) { /…/ }
}
}

上面的代码中，我们通过Modifier类调用的方式，去调用不同的修饰符函数。

• clickable 使可组合项响应用户输入，并显示涟漪。
• padding 在元素周围留出空间。
• fillMaxWidth 使可组合项填充其父项为它提供的最大宽度。
• size() 指定元素的首选宽度和高度

注意：修饰符的函数调用顺序非常重要。由于每个函数都会对上一个函数返回的 Modifier 进行更改，因此顺序会影响最终结果。比如上面是对Column整体控件都可以点击，但如果我们把，padding跟clickable的修饰符的顺序换一下。那么Column的点击范围就需要扣除padding的部分。

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

二：常用的Modifier的函数方法介绍

Modifier涉及到的方法很多，我们可以从官网的地址去查看Modifier方法,下面我们会进可能的去涉及解释到常用方法的使用。

@Composable
fun PaddedComposable() {
Box(modifier = Modifier.size(300.dp,300.dp).background(Color.Blue)){}
}

@Composable
fun PaddedComposable() {
Text(“Hello World”, modifier = Modifier.padding(20.dp))
}

@Preview()
@Composable
fun paddingTest(){
Column(modifier = Modifier.size(200.dp).background(Color.Gray).padding(20.dp)) {
Box(modifier = Modifier.size(30.dp).background(Color.Red).padding(top = 4.dp)) {}
Box(modifier = Modifier.size(30.dp).padding(start = 4.dp,top = 4.dp).background(Color.Green)) {}
Box(modifier = Modifier.size(30.dp).padding(vertical = 4.dp).background(Color.Red))