如何在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的对齐函数...

- Przemo

Answer 1

事实证明解决方法并不需要使用Alignment.CenterVertically，而是使用Alignment.CenterStart。

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

真是个惊喜。虽然如果你以前使用过标准的非组合Android布局，那么命名可能会令人困惑。

事实证明，Alignment.CenterVertically 对于Row布局及其verticalAlignment参数非常有用:

Row(verticalAlignment = Alignment.CenterVertically)

- Przemo

Answer 2

使用

contentAlignment = Alignment.TopCenter // for horizontally center

contentAlignment = Alignment.CenterStart // for vertically center

contentAlignment = Alignment.Center   // for both

- Aditya Anand