jetpack compose Row的子控件垂直和水平居中
时间: 2024-09-15 16:09:49 浏览: 76
Jetpack Compose 中的 `Row` 是一个用于创建一行排列组件的构建块,它默认按照组件的宽度来分配空间。如果你想让 Row 中的子控件在垂直或水平方向上居中,可以借助 Compose 的一些布局属性来实现。
**垂直居中**:
你可以通过设置 `Alignment.CenterVertically` 属性,并将其应用于 `Column` 或者 `Modifier.align` 来实现子控件的垂直居中。例如:
```kotlin
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth()
) {
Column(
modifier = Modifier.size(200.dp).align(Alignment.CenterStart)
) {
// 子控件
}
}
```
**水平居中**:
对于水平居中,可以在 `Row` 上设置 `Alignment.CenterHorizontally` 或者在每个子控件上使用 `Modifier.align` 并指定 `Alignment.CenterStart` 和 `Alignment.CenterEnd` 中的一个,如:
```kotlin
Row(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxWidth()
) {
Text("Text").apply {
alignment = Alignment.CenterStart
}
Image(...).apply {
alignment = Alignment.CenterEnd
}
}
```
以上代码示例中,`Text` 和 `Image` 将会水平居中对齐。
阅读全文