如何在 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`.
)

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

Answer 1

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

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

真是一个惊喜。这有点有意义，尽管如果您以前使用过标准的非组合 Android 布局，命名会很混乱。

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

Row(verticalAlignment = Alignment.CenterVertically)