android - Jetpack Compose 将行/列子项相对于彼此对齐

Question

有没有一种简单的方法，无需借助手动布局或约束布局，就可以将列/行的子项彼此相对对齐，而与列/行内容对齐无关？

这就是我想要实现的目标：拥有一个将其内容向右对齐的 Column。但是孩子们彼此居中对齐。

标签： androidandroid-jetpack-compose

Answer 1

您可以像上面的答案一样将孩子包装在一个容器中，但我更喜欢编写自定义可组合项，因为这在 Jetpack Compose 中很容易做到，然后您可以在您的应用程序中重用它们。

您可以使用此自定义列来实现

@Composable
fun MyColumn(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
) {
    Layout(
        content = content,
        modifier = modifier,
    ) { measurables, constraints ->
        val looseConstraints = constraints.copy(
            minWidth = 0,
            minHeight = 0,
        )
        val placeables = measurables.map { measurable ->
            measurable.measure(looseConstraints)
        }
        val maxChildWidth = placeables.maxByOrNull { it.width }?.width ?: 0
        val height = placeables.sumOf { it.height }
        layout(
            constraints.maxWidth,
            height.coerceAtMost(constraints.maxHeight),
        ) {
            var yPosition = 0
            val maxWidth = constraints.maxWidth
            placeables.forEach { placeable ->
                val deltaX = maxWidth - maxChildWidth + (maxChildWidth - placeable.width) / 2
                placeable.place(deltaX, yPosition)
                yPosition += placeable.height
            }
        }
    }
}