如何在 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

对于

Row

布局及其

verticalAlignment

参数很有用：

Row(verticalAlignment = Alignment.CenterVertically)

Answer 2

使用

contentAlignment = Alignment.TopCenter // for horizontally center

contentAlignment = Alignment.CenterStart // for vertically center

contentAlignment = Alignment.Center   // for both