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

Question

在 Compose 中，有没有一种方法可以将一个 composable 与一个居中的项对齐，而不使用 ConstraintLayout？

我想实现这个效果：

我可以使用 Spacer 和 Weights 来实现这个效果，如下所示：

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

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

问题在于我有条件地显示了Label标签，如果我隐藏这两个带权重的元素，则按钮会稍微移动。

另外不确定使用权重是否比首选使用ConstraintLayout产生更多性能影响。

- cwiesner

Answer 1

Modifier.weight 是创建这种布局的正确方式。我不确定性能是否比 ConstraintLayout 更好，但肯定不会更差。

如果遇到性能问题，应该在谷歌问题跟踪器上创建一个问题，因为这就是 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(...)
        }
    }
}

- Phil Dukhov