带有 Compose 的 ConstraintLayout 中的 goneMargin

Question

我正在尝试在 Compose 中使用 ConstraintLayout。我希望将第二个可组合项限制在第一个可组合项的末尾。第一个可组合项可以存在也可以不存在。在每种情况下，我都希望有不同的边距。因此，我使用 goneMargin 但这似乎没有得到尊重。我还需要做其他事情吗？

ConstraintLayout {
    val (firstItemRef, secondItemRef) = createRefs()

    if (isFirstItemVisible) {
        Text(
            text = "First",
            modifier = Modifier.constrainAs(firstItemRef) {
                top.linkTo(anchor = parent.top)
                start.linkTo(anchor = parent.start)
            }
        )
    }

    Text(
        text = "Second",
        modifier = Modifier.constrainAs(secondItemRef) {
            top.linkTo(anchor = parent.top)
            start.linkTo(anchor = firstItemRef.end, margin = 8.dp, goneMargin = 16.dp)
        }
    )
}

作为解决方法，我们可以做类似的事情，但这似乎伪造了 goneMargin

的目的

Text(
    text = "Second",
    modifier = Modifier.constrainAs(secondItemRef) {
        val margin = if (isFirstItemVisible) 8.dp else 16.dp
        val end = if (isFirstItemVisible) firstItemRef.end else parent.end
        top.linkTo(anchor = parent.top)
        start.linkTo(anchor = end, margin = margin)
    }
)

Answer 1

您必须像这样在 ConstrainScope 中使用 visibility 属性：

ConstraintLayout(Modifier.fillMaxSize()) {
    val (firstItemRef, secondItemRef) = createRefs()
    Text(
        text = "First",
        modifier = Modifier.constrainAs(firstItemRef) {
            top.linkTo(anchor = parent.top)
            start.linkTo(anchor = parent.start)
            // >> This is what you want <<<
            visibility = if (isFirstItemVisible) Visibility.Visible else Visibility.Gone
        }
    )
    Text(
        text = "Second",
        modifier = Modifier.constrainAs(secondItemRef) {
            top.linkTo(anchor = parent.top)
            start.linkTo(anchor = firstItemRef.end, margin = 8.dp, goneMargin = 16.dp)
        }
    )
}

带有 Compose 的 ConstraintLayout 中的 goneMargin

goneMargin in ConstraintLayout with Compose

android-constraintlayout

android-jetpack-compose