Home > Software engineering >  Compose AlertDialog not closing
Compose AlertDialog not closing

Time:11-19

I have a Dialog that I cant close when I press the button this is my code, I believe that is for the if cycle, but I need it to make it true under those circumstances, any idea that could help me here?

@Composable
    fun PopupWindowDialog(
    parentUiState: ParentHomeUiState,
) {
    val openDialog = remember { mutableStateOf(false) }
    var sliderPosition by remember { mutableStateOf(0f) }

    if (!parentUiState.showInAppFeedback){
        openDialog.value = true
    }
    val recommend = sliderPosition.toInt()
    Column(
    ) {
        Box {
            if (openDialog.value) {
                Dialog(
                    onDismissRequest = { openDialog.value = false },
                    properties = DialogProperties(),
                ){
                    Box(
                        Modifier
                            .fillMaxWidth()
                            .fillMaxHeight()
                            //.padding(vertical = 70.dp, horizontal = 10.dp)
                            .padding(vertical = 70.dp )
                            .background(Color.White, RoundedCornerShape(10.dp))
                            //.border(1.dp, color = Color.Black, RoundedCornerShape(20.dp))
                            .border(1.dp, color = Color.White, RoundedCornerShape(20.dp))
                    ) {
                        Button(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(10.dp),
                            onClick = {
                              openDialog.value = !openDialog.value
                            }
                        ) {
                            Text(
                                text = "¡Contesta y gana  20 puntos!",
                                style = MaterialTheme.typography.subtitle2,
                                fontWeight = FontWeight.Bold,
                                modifier = Modifier.padding(3.dp))
                        }
                    }
                }
            }
        }
    }
}

CodePudding user response:

I have a Dialog that I cant close when I press the button

Since you didn't show how your posted code (composable) is being called, ill assume the .showInAppFeedback is evaluating true.

Pay attention to these parts of your codes

val openDialog = remember { mutableStateOf(false) }

...
...

if (!parentUiState.showInAppFeedback) {
    openDialog.value = true
}

, openDialog is a state and when it changes value it will re-compose your entire composable, so when the dialog is visible, and when you set it to false via button click, the entire composable will re-compose and re-evaluate your if condition, setting openDialog.value to true again, and dialog will never close.

I don't know your use-case but you can wrap it inside a LaunchedEffect

LaunchedEffect(parentUiState.showInAppFeedback) {
    openDialog.value = true
}

CodePudding user response:

Since parentUiState.showInAppFeedback is not updated, openDialog.value will always be set to true when the view recomposes. You should use parentUiState.showInAppFeedback in the initial remember block but not for future recomposition.

@Composable
fun PopupWindowDialog(parentUiState: ParentHomeUiState) {
    val openDialog = remember { mutableStateOf(!parentUiState.showInAppFeedback) }
    var sliderPosition by remember { mutableStateOf(0f) }

    val recommend = sliderPosition.toInt()
    Column {
        Box {
            if (openDialog.value) {
                Dialog(
                    onDismissRequest = { openDialog.value = false },
                    properties = DialogProperties(),
                ) {
                    Box(
                        Modifier
                            .fillMaxWidth()
                            .fillMaxHeight()
                            //.padding(vertical = 70.dp, horizontal = 10.dp)
                            .padding(vertical = 70.dp)
                            .background(Color.White, RoundedCornerShape(10.dp))
                            //.border(1.dp, color = Color.Black, RoundedCornerShape(20.dp))
                            .border(1.dp, color = Color.White, RoundedCornerShape(20.dp))
                    ) {
                        Button(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(10.dp),
                            onClick = {
                                openDialog.value = !openDialog.value
                            }
                        ) {
                            Text(
                                text = "¡Contesta y gana  20 puntos!",
                                style = MaterialTheme.typography.subtitle2,
                                fontWeight = FontWeight.Bold,
                                modifier = Modifier.padding(3.dp)
                            )
                        }
                    }
                }
            }
        }
    }
}
  • Related