在 Jetpack Compose 中，如何使新元素始终出现在任何内容的顶部？

Question

我有两个按钮，每个按钮都会使文本出现在屏幕内容的顶部。

如果我按下按钮 A，则屏幕顶部应出现文本“Here is A”。如果我按下按钮 B，则屏幕顶部应出现文本“Here is B”。

如果我按A，然后按B，那么“这里是A”应该首先出现，然后“这里是B”应该出现在上面；如果我先按 B 再按 A，则应该发生相反的情况。

我的设置如下：

    val showA = remember { mutableStateOf(false) }
    val showB = remember { mutableStateOf(false) }
    
    if (showA.value) {
        Text(text = "Here is A!")
    }    
    
    if (showB.value) {
        Text(text = "Here is B!")
    }
    
    Button(onClick = { showA.value = true }) {
        Text(text = "Show A")
    }    
    
    Button(onClick = { showB.value = true }) {
        Text(text = "Show B")
    }

这里的问题是：如果我先点击 A，“这是 A！”出现，然后如果我在“这是 B！”之后单击 B出现在其下方。

我希望能够更改此设置，以便如果我第二次单击的任何内容都将始终位于我首先单击的任何内容之上。这怎么办？

Answer 1

每次按下任何按钮时，您都会看到一个又一个的文本，因为单击按钮时，您将一个值设置为 true，而不是其他值设置为 false，并且由于两个值都变为 true，因此它会在现有内容上绘制内容。

在 Compose 中，代码中声明元素的顺序决定了它们在屏幕上的堆叠顺序。因此，如果您首先将

showA.value

设置为 true，然后将

showB.value

设置为 true，则 B 的文本将绘制在 A 的文本之后，并显示在其顶部。

要解决此问题，您必须将一个值设置为 true，将另一个值设置为 false：

    val showA = remember { mutableStateOf(false) }
    val showB = remember { mutableStateOf(false) }
    
    if (showA.value) {
        Text(text = "Here is A!")
    }    
    
    if (showB.value) {
        Text(text = "Here is B!")
    }
    
    Button(onClick = { 
      showA.value = true 
      showB.value = false
    }) {
        Text(text = "Show A")
    }    
    
    Button(onClick = {  
      showA.value = false 
      showB.value = true
    }) {
        Text(text = "Show B")
    }

或者你也可以这样实现：

@Composable
fun ToggleVisibilityExample() {
    var showA by remember { mutableStateOf(false) }
    var showB by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {
        ToggleableText(visible = showA, text = "Here is A!")

        ToggleableText(visible = showB, text = "Here is B!")

        Button(onClick = { toggleVisibility(showA) }) {
            Text(text = "Show A")
        }

        Button(onClick = { toggleVisibility(showB) }) {
            Text(text = "Show B")
        }
    }
}

@Composable
fun ToggleableText(visible: Boolean, text: String) {
    if (visible) {
        Text(
            text = text,
            modifier = Modifier
                .padding(16.dp)
        )
    }
}

fun toggleVisibility(state: MutableState<Boolean>) {
    state.value = !state.value
}

或者，您可以定义数据类来切换可见性：

data class TextItem(val content: String, var visible: Boolean = false)

@Composable
fun ToggleVisibilityWithClass() {
    var textItems by remember {
        mutableStateOf(
            listOf(
                TextItem(content = "Here is A!", visible = false),
                TextItem(content = "Here is B!", visible = false)
            )
        )
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {
        textItems.forEach { textItem ->
            if (textItem.visible) {
                Text(
                    text = textItem.content,
                    modifier = Modifier
                        .padding(16.dp)
                )
            }
        }

        Button(onClick = { toggleVisibility(textItems[0]) }) {
            Text(text = "Show A")
        }

        Button(onClick = { toggleVisibility(textItems[1]) }) {
            Text(text = "Show B")
        }
    }
}

@Composable
fun toggleVisibility(textItem: TextItem) {
    textItem.visible = !textItem.visible
}