Kotlin Compose，在行中对齐元素

发布于01月10日

我使用新品牌Kotlin Compose作为我的视图，我有一行有两个项目，我如何才能让它们像center-vertical一样？

    Row(
            modifier = Spacing(20.dp)
    ) {
        Text(text = "Hello $name!")
        Spacing(10.dp)
        Padding(padding = 25.dp) {
            Button(text = "Click", onClick = { /*do something*/ })

        }
    }

请注意，如果没有填充，它们也不会对齐.

推荐答案

Row中有verticalAlignment个论点.您也可以使用align修改量来分别配置项目对齐，该修改量将改写行的verticalAlignment.例如:

@Composable
fun RowAlignmentExample() {
    Row(verticalAlignment = Alignment.CenterVertically) {
        SizeTile(14)
        SizeTile(18)
        SizeTile(22)
        SizeTile(26)
        SizeTile(10, modifier = Modifier.align(Alignment.Top))
        SizeTile(10, modifier = Modifier.align(Alignment.Bottom))
    }
}

@Composable
fun SizeTile(fontSize: Int, modifier: Modifier = Modifier) {
    Text(
        text = fontSize.toString(),
        fontSize = fontSize.sp,
        modifier = modifier
            .padding(2.dp)
            .background(Color.White, RoundedCornerShape(4.dp))
            .padding(2.dp)
    )
}