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

【问题标题】：How to center vertically children of Box layout in Jetpack Compose?如何在 Jetpack Compose 中垂直居中 Box 布局的子项？
【发布时间】：2022-12-16 17:43:10
【问题描述】：

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

这是它在代码中的样子：

    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 layout 提供了在内部对齐项目的可能性：

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`.
)

但它不编译。如果以上都不能编译，那我该怎么办？ Box没有可用的对齐功能，支持Alignment.CenterVertically...

【问题讨论】：

标签： android android-jetpack-compose android-jetpack

【解决方案1】：

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

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

真是个惊喜。这是有道理的，尽管如果您以前使用过标准的非 Compose Android 布局，那么命名会让人感到困惑。

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

Row(verticalAlignment = Alignment.CenterVertically)

【讨论】：