Интерактивный переключатель, постоянно повторяющийся, вызывающий сбой пользовательского интерфейса в строке поиска - 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()
                    }

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") }
                                )
                            }