Kotlin Compose，排列行中的项目

Question

我正在使用全新的Kotlin Compose进行视图开发，我有一个包含两个项目的行，如何让它们看起来像是垂直居中的呢？

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

        }
    }

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

- Alireza Akbari

---

你想将它们垂直居中对齐在屏幕上吗？ - Gil Goldzweig

Answer 1

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

- Valeriy Katkov

Answer 2

你可以在 Row 中使用 verticalAlignment 参数。
类似这样的代码：

Row(
    modifier = Modifier.padding(20.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    Text(text = "Hello!")
    Spacer(modifier = Modifier.width(10.dp))
    Button(onClick = { /*do something*/ },
            modifier = Modifier.padding(25.dp)) {
        Text(text = "Click")
    }
}

您还可以在每个Row组合中使用RowScope中定义的align修饰符。
请注意：

将元素在Row内垂直对齐，此对齐方式优先于Row的verticalAlignment参数。

Row(
    verticalAlignment = Alignment.CenterVertically
) {
    // The child with no align modifier is positioned by default so that is in the middle of
    // the vertical axis.
    Box(Modifier.size(80.dp, 40.dp).background(Teal200))

    // Gravity.Top, the child will be positioned so that its top edge is aligned to the top
    // of the vertical axis.
    Box(Modifier.size(80.dp, 40.dp).align(Alignment.Top).background(Color.Red))

    // Gravity.Center, the child will be positioned so that its center is in the middle of
    // the vertical axis.
    Box(Modifier.size(80.dp, 40.dp).align(Alignment.CenterVertically).background(Color.Yellow))

    // Gravity.Bottom, the child will be positioned so that its bottom edge is aligned to the
    // bottom of the vertical axis.
    Box(Modifier.size(80.dp, 40.dp).align(Alignment.Bottom).background(Color.Green))

}

- Gabriele Mariotti

Answer 3

在Compose版本1.0中，这是一个解决方案...

Row(
    modifier = Modifier.padding(20.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    Text(text = "Hello Android!",
        modifier = Modifier.padding(end = 10.dp))
    Button(text = { Text("Click") },
        onClick = { /*do something*/ },
        modifier = Modifier.padding(25.dp)
    )
}

- nglauber

Answer 4

在 1.0.1 版本中，您可以这样使用 verticalArrangement:

Row(
    Modifier
        .fillMaxWidth()
        .height(70.dp),
    verticalArrangement = Arrangement.Center
) {
    ...
}

- Murdokai

Answer 5

您可以使用Align组合部件

Align(Alignment.TopCenter) { //You can change the alignment to fit your needs.
    Row(modifier = Spacing(20.dp)) {
        Text(text = "Hello $name!")
        Spacing(10.dp)
        Padding(padding = 25.dp) {
            Button(text = "Click", onClick = { /*do something*/ })
        }
    }
}

上面的代码应该将整行对齐，但如果您想让每个组件相对于“row”居中对齐，则需要单独包装每个组件。

- Gil Goldzweig