Jetpack Compose 修饰符

借助修饰符，您可以修饰或扩充可组合项。您可以使用修饰符来执行以下操作：

更改可组合项的大小、布局、行为和外观
添加信息，如无障碍标签
处理用户输入
添加高级互动，如使元素可点击、可滚动、可拖动或可缩放

修饰符是标准的 Kotlin 对象。您可以通过调用某个 Modifier 类函数来创建修饰符：

kotlin 复制代码

@Preview
@Composable
fun ModifierPage(navController: NavHostController?= null) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text("Modifier 修饰符")
                },
                navigationIcon = {
                    IconButton(onClick = { navController?.popBackStack() }) {
                        Icon(Icons.Filled.ArrowBack,"")
                    }
                }
            )
        }
    ) { padding ->
        Column(modifier = Modifier.padding(padding)) {
            Box(Modifier.background(color = MaterialTheme.colors.primary)) {
                Column(modifier = Modifier
                    .padding(24.dp)
                ) {
                    Text(text = "Hello,", color = Color.White)
                    Text(text = "Android", color = Color.White)
                }
            }
        }
    }
}

您可以将以下函数连在一起以将其组合起来：

kotlin 复制代码

...
    Column(modifier = Modifier
        .padding(24.dp)
        .fillMaxWidth()) {
        Text(text = "Hello,", color = Color.White)
        Text(text = "Android", color = Color.White)
    }
...

请注意，在上面的代码中，结合使用了不同的修饰符函数。

padding 在元素周围留出空间。
fillMaxWidth 使可组合项填充其父项为它提供的最大宽度。

最佳实践是让所有可组合项都接受 modifier 参数，并将该修饰符传递给其发出界面的第一个子项。

修饰符顺序很重要

修饰符函数的顺序非常重要 。由于每个函数都会对上一个函数返回的 Modifier 进行更改，因此顺序会影响最终结果。让我们来看看这方面的一个示例：

下图是修饰符先执行 clickable 后执行 padding 的效果

对应代码（注意 6、7 行的顺序）

kotlin 复制代码

Row(
    modifier = Modifier.border(border = BorderStroke(
                width = 1.dp,color = Color.Black),
               shape = RectangleShape
        )
        .clickable(onClick = {})
        .padding(16.dp)
        .fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically,
) {
    Image(
        modifier = Modifier
            .size(50.dp) // 设置图片大小
            .clip(CircleShape), // 裁剪为圆形
        contentScale = ContentScale.Crop, // 裁剪图片以适应大小
        contentDescription = "Artist image",
        painter = painterResource(id = R.drawable.avatar)
    )
    Column(modifier = Modifier.padding(start = 15.dp)) {
        Text("码农宝")
        Text("3分钟前")
    }
}

下图是修饰符先执行 padding 后执行 clickable 的效果

kotlin 复制代码

Row(
    modifier = 
        .padding(16.dp)
        .clickable(onClick = {})
        
) {
    ...
}

padding 和 size

默认情况下，Compose 中提供的布局会封装其子项。但是，您可以使用 size 修饰符设置尺寸：

kotlin 复制代码

Row(
    modifier = Modifier
        .size(width = 300.dp, height = 100.dp)
       ...
    ,    
) {
    ...
}