kotlin - 可点击切换连续重复导致搜索栏中的 UI 故障 - Jetpack Compose Android Studio Kotlin

Question

我试图在选择“搜索电影”按钮时显示文本字段，并在未选择时消失。

当我点击“搜索电影”按钮时，该应用程序似乎不断识别点击。

这是一段视频：https ://youtu.be/5LQ8k0Y05Cc

如您所见，选择“热门电影”按钮时，文本字段也不会消失。

这是可组合的功能：

@Composable
                    fun MaterialButtonToggleGroup() {
                        val options = listOf(
                            "Popular Movies",
                            "Search Movies"
                        )
                        var selectedOption by remember {
                            mutableStateOf("")
                        }
                        val onSelectionChange = { text: String ->
                            selectedOption = text
                        }
                        Column() {
                            var isExpanded by remember { mutableStateOf(false) }

                            Row(
                                horizontalArrangement = Arrangement.SpaceEvenly,
                                modifier = Modifier.fillMaxWidth(),
                            ) {
                                options.forEach { text ->
                                    Row(
                                        modifier = Modifier
                                            .padding(
                                                vertical = 8.dp,
                                            ),
                                    ) {
                                        Text(
                                            text = text,
                                            style = typography.body1.merge(),
                                            color = Color.White,
                                            modifier = Modifier
                                                .clip(
                                                    shape = RoundedCornerShape(
                                                        size = 12.dp,
                                                    ),
                                                )
                                                .clickable {
                                                    onSelectionChange(text)
                                                }
                                                .background(
                                                    if (text == selectedOption) {
                                                        Color.Magenta
                                                    } else {
                                                        Color.Gray
                                                    }
                                                )
                                                .padding(
                                                    vertical = 12.dp,
                                                    horizontal = 16.dp,
                                                ),
                                        )
                                    }
                                }
                            }
                            if (selectedOption == "Search Movies") {
                                isExpanded = !isExpanded
                            }
                            if (isExpanded) {
                                var text by remember { mutableStateOf("") }

                                OutlinedTextField(
                                    value = text,
                                    modifier = Modifier.fillMaxWidth()
                                        .padding(all = 3.dp),
                                    onValueChange = { text = it },
                                    label = { Text("Enter Movie Info") }
                                )
                            }
                        }
                        (activity as MainActivity?)?.viewSelection(selectedOption)
                    }
                    Surface {
                        MaterialButtonToggleGroup()
                    }

标签： kotlinandroid-jetpack-composetogglebuttonsearchbar

Answer 1

事实证明，我应该为每个场景isExpanded设置true或false。

我变了：

if (selectedOption == "Search Movies") {
                            isExpanded = !isExpanded
                        }
                        if (isExpanded) {
                            var text by remember { mutableStateOf("") }

                            OutlinedTextField(
                                value = text,
                                modifier = Modifier.fillMaxWidth()
                                    .padding(all = 3.dp),
                                onValueChange = { text = it },
                                label = { Text("Enter Movie Info") }
                            )
                        }

至：

if (selectedOption == "Search Movies") {
                                isExpanded = true
                            } else {
                                isExpanded = false
                            }
                            if (isExpanded) {
                                var text by remember { mutableStateOf("") }

                                OutlinedTextField(
                                    value = text,
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .padding(all = 3.dp),
                                    onValueChange = { text = it },
                                    label = { Text("Enter Movie Info") }
                                )
                            }