组合布局：相对于居中项目对齐（例如 toRightOf）

Question

Compose 中是否有一种方法可以在不使用 ConstraintLayout 的情况下将可组合项与居中的项目对齐？

我想实现这个：

我可以像这样使用 Spacer 和 Weights

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically,
) {

    Spacer(Modifier.weight(1f))
    Button(...)
    Label(Modifier.weight(1f),...)
}

问题是我有条件地显示 Label，如果我用权重隐藏两个元素，按钮会轻微移动。

也不确定使用权重是否比最初的 ConstraintLayout 产生更大的性能影响。

Answer 1

Modifier.weight 是创建此类布局的正确方法。我不确定性能是否优于 ConstraintLayout，但肯定不会更差。

如果您运行遇到性能问题，您应该在 google 问题跟踪器上创建一个问题，因为这就是应该使用 Compose 的方式。就我个人而言，我没有遇到任何与 weight 相关的性能问题，但该技术相当新，因此您不能完全排除这种可能性。

在您的情况下，您需要在任何给定时间都有一些代表，您可以向其申请 Modifier.weight。您可以使用 if-else 并在 else 的情况下添加 Spacer，但我更喜欢使用带有可选内容的 Box：它看起来更干净并且可以正常工作如果你添加动画。

默认 Box contentAlignment 是 Alignment.TopStart，这将根据您的情况完全按照需要工作，但在其他一些情况下，您可以覆盖它或添加更多 Spacers里面。

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically,
) {
    Spacer(Modifier.weight(1f))
    Button(...)
    Box(Modifier.weight(1f)) { 
        if (condition) {
            Label(...)
        }
    }
}

组合布局：相对于居中项目对齐（例如 toRightOf）

Compose Layout: Align relative to centered item (eg. toRightOf)

android-layout

kotlin

android-jetpack-compose