如何在 Jetpack Compose 中垂直居中 Box 布局的子项？

Question

例如。我想获得这样的布局，其中所有图像都垂直居中。

Box(
    modifier = Modifier
        .width(254.dp)
        .height(186.dp)
) {
    Image(
        // scaling
    )
    Image(
        // scaling, padding, zIndex
    )
    Image(
        // scaling, padding, zIndex
    )
    Image(
        // scaling, padding, zIndex
    )
    Image(
        // padding, zIndex
    )
}

Box 布局使得在内部对齐项目成为可能：

Box(
    modifier = Modifier.align(Alignment.CenterVertically) 
    // But doesn't compile, type mismatch: `Alignment.Horizontal` type is required.
    // Not `Alignment.Vertical`.
)

或

Box(
     contentAlignment = Alignment.CenterVertically,
     // But doesn't compile, type mismatch: `Alignment` type is required.
     // Not `Alignment.Vertical`.
)

如果上面的none都编译通过了，那怎么办？ Box 没有可用的对齐功能，它支持 Alignment.CenterVertically...

Answer 1

事实证明，解决方案是甚至懒得使用 Alignment.CenterVertically，而是 Alignment.CenterStart.

Box(
    contentAlignment = Alignment.CenterStart,
    ...
)

真是惊喜。这有点道理，尽管如果您之前使用标准的非撰写 Android 布局，命名会令人困惑。

事实证明，Alignment.CenterVertically 对 Row 布局及其 verticalAlignment 参数很有用：

Row(verticalAlignment = Alignment.CenterVertically)

如何在 Jetpack Compose 中垂直居中 Box 布局的子项？

How to center vertically children of Box layout in Jetpack Compose?

android

android-jetpack

android-jetpack-compose