android - Compose ConstraintLayout 是否为 INVISIBLE 和 GONE 提供与基于 View 的 ConstraintLayout 相同的处理？

Question

免责声明:我知道 Compose 刚刚进入 alpha01，因此我不希望每个功能可用。但是，特定布局案例的布局和处理是恕我直言的一个重要主题应该尽早解决 😉。

当前基于 View ConstraintLayout 提供了一些特定的处理，以防 subview 是标记为GONE，引用 ConstrainLayout documentation .

我检查了 Compose ConstraintLayout 文档、可用的修饰符等等，但是没有找到任何指向这个方向的东西。我也找不到任何提示INVISIBLE 以及如何/如果 Compose ConstraintLayout 像基于 View ConstraintLayout 一样处理它。

通常，当前基于 View 的布局(例如 LinearLayout)处理 INVISIBLE 和 GONE类似时尚:

• 如果 View 处于状态INVISIBLE，那么 View 是布局的一部分及其大小，只是不是显示。其他view的整体布局没有变化，保持原位。

• 如果 View 处于状态GONE，其大小通常被视为 0 并且重新计算布局并改变了，其他观点通常会改变他们的立场。

这里是一个简单的 Compose ConstraintLayout UI，一行只有 4 个按钮，链接起来让它们很好传播。

// if dontShow is 0 then show all buttons, otherwise make the button with this number
// somehow INVISIBLE. This feature is not yet implemented.
@Composable
fun fourButtonsCL(dontShow: Int) {
    ConstraintLayout(Modifier.fillMaxSize()) {
        val (btn1, btn2, btn3, btn4) = createRefs()
        TextButton(onClick = {}, Modifier.constrainAs(btn1) {}.background(teal200)) { Text("Button1") }
        TextButton(onClick = {}, Modifier.constrainAs(btn2) {}.background(teal200)) { Text("Button2") }
        TextButton(onClick = {}, Modifier.constrainAs(btn3) {}.background(teal200)) { Text("Button3") }
        TextButton(onClick = {}, Modifier.constrainAs(btn4) {}.background(teal200)) { Text("Button4") }

        createHorizontalChain(btn1, btn2, btn3, btn4)
    }
}

@Preview(showBackground = true)
@Composable
fun previewThreeButtons() {
    ComposeAppTheme {
        fourButtonsCL()
    }
}

假设我想让 Button3 不可见，但将其他 3 个按钮保持在它们所在的位置是。因此只是 Button2 和 Button4 之间的一个洞。如何在不创建另一个的情况下实现这一目标可组合或添加额外的逻辑。虽然这个简单案例中的逻辑可能只是一条 View 线代码，更复杂的布局将需要一些更复杂的逻辑。基于 View 的 ConstraintLayout我们只需要修改 subview 。

另一个假设:使 Button3 从布局中完全消失(GONE)并重新计算布局，其余按钮变得更宽且均匀分布。乍一看这看起来很简单，在这个非常简单的例子中，它可能很容易。然而，在更复杂的布局中，这可能需要对嵌入式可组合项的约束进行一些甚至大量重新布线。

因此问题是:compose 如何处理 Column 和 Row 布局的这些情况(如在基于 View 的 LinearLayout 中)尤其是 ConstraintLayout？但是有以下限制😉:没有定义许多新的可组合项和/或没有在可组合项中添加复杂的布局逻辑(重新布线例如约束)。

我是不是遗漏了一些修饰符？这在可组合布局中是否有计划或可能？会是什么在 Compose 中解决此类布局情况的首选方法是什么？

Answer 1

根据@CommonsWare 对问题的评论，我可以解决 INVISIBLE选项，请参阅下面的代码。

目前(在 alpha-01 中)ConstraintLayout 的实现似乎不完整，至少代码中的一些TODO 注释表明了这一点。这个似乎包括对 GONE 功能的尚未支持。我看到了其中一些:

// TODO(popam, b/158069248): add parameter for gone margin

此外，链功能还没有以与在基于 View 的 ConstraintLayout 中。

object FourElementsNoDSL {
    const val elementA = "ElementA"
    const val elementB = "ElementB"
    const val elementC = "ElementC"
    const val elementD = "ElementD"

    private val noDSLConstraintSet = ConstraintSet {

        // Create references with defines ids, here using a string as id. Could be an Int as well,
        // actually it's defined as 'Any'
        val elemA = createRefFor(elementA)
        val elemB = createRefFor(elementB)
        val elemC = createRefFor(elementC)
        val elemD = createRefFor(elementD)

        // Simple chain only. Instead of this simple chain we can use (for example):
        //     constrain(elemA) {start.linkTo(parent.start) }
        // to set a constraint as known in XML

//        constrain(elemA) {start.linkTo(parent.start, 16.dp) }
//        constrain(elemB) {start.linkTo(elemA.end) }
//        constrain(elemC) {start.linkTo(elemB.end) }
//        constrain(elemD) {end.linkTo(parent.end) }
        createHorizontalChain(elemA, elemB, elemC, elemD)
    }

    @Composable
    fun fourButtonsCLNoDSL(doNotShow: List<String>) {
        ConstraintLayout(constraintSet = noDSLConstraintSet, modifier = Modifier.fillMaxSize()) {

            // This block contains the children
            Text(text = "A",
                    modifier = Modifier.layoutId(elementA)
                            .drawOpacity(if (doNotShow.contains(elementA)) 0f else 1f)
                            .padding(0.dp),
                    style = TextStyle(fontSize = 20.sp)
            )
            Text(text = "B",
                    modifier = Modifier.layoutId(elementB)
                            .drawOpacity(if (doNotShow.contains(elementB)) 0f else 1f)
                            .padding(0.dp),
                    style = TextStyle(fontSize = 20.sp)
            )
            Text(text = "C",
                    modifier = Modifier.layoutId(elementC)
                            .drawOpacity(if (doNotShow.contains(elementC)) 0f else 1f)
                            .padding(0.dp),
                    style = TextStyle(fontSize = 20.sp)
            )
            Text(text = "D",
                    modifier = Modifier.layoutId(elementD)
                            .drawOpacity(if (doNotShow.contains(elementD)) 0f else 1f)
                            .padding(0.dp),
                    style = TextStyle(fontSize = 20.sp))

        }
    }
}

@Preview(showBackground = true)
@Composable
fun previewFourFieldsNoDSL() {
    val noShow = listOf(FourElementsNoDSL.elementC)
    PlaygroundTheme {
        FourElementsNoDSL.fourButtonsCLNoDSL(noShow)
    }
}

对象 FourElementsNoDSL 定义布局，提供元素 ID 等。这大致相当于包含此类布局的 XML 文件。noDSL 表示此布局不使用 Compose ConstraintLayout 的 Kotlin数字用户线。目前 DSL 不提供设置元素引用的机制(在 layoutId 中使用)具有定义的 ID，如本示例中所做的那样。