如何关闭可组合对话框？

Question

我是 jetpack compose 的新手，我真的很想知道如何消除可组合对话框。jetpack compose 中的对话框是否有像 dismiss() 这样的函数？

通过使用下面的代码，我无法关闭该对话框，无论是触摸外部还是按后退按钮。该对话框在视图层次结构的顶部仍然可见。`

@Composable
fun InfoDialog() {
    val shouldDismiss = remember {
        mutableStateOf(false)
    }
    Dialog(onDismissRequest = {
        shouldDismiss.value = false
    }, properties = DialogProperties(
        dismissOnBackPress = true,
        dismissOnClickOutside = true
    )) {
        Card(
            shape = RoundedCornerShape(8.dp),
            modifier = Modifier.padding(16.dp,8.dp,16.dp,8.dp),
            elevation = 8.dp
        ) {
            Column(
                Modifier.background(c282534)) {
                Column(modifier = Modifier.padding(16.dp)) {
                    Text(
                        text = "Notice",
                        textAlign = TextAlign.Center,
                        modifier = Modifier
                            .padding(top = 8.dp)
                            .fillMaxWidth(),
                        style = TextStyle(fontWeight = FontWeight.Bold, color = Color.White, fontSize = 24.sp),
                        maxLines = 2,
                        overflow = TextOverflow.Ellipsis
                    )
                    Text(
                        text = "Allow Permission to send you notifications when important update added.",
                        textAlign = TextAlign.Center,
                        modifier = Modifier
                            .padding(top = 8.dp, start = 24.dp, end = 24.dp)
                            .fillMaxWidth(),
                        style = TextStyle(color = Color.White, fontSize = 16.sp)
                    )
                }
                Row(
                    Modifier
                        .fillMaxWidth()
                        .padding(top = 8.dp),
                    horizontalArrangement = Arrangement.SpaceAround) {

                    TextButton(onClick = {
                        shouldDismiss.value = true
                    }, modifier = Modifier.weight(1f)) {

                        Text(
                            "Close",
                            fontWeight = FontWeight.Normal,
                            color = Color.White,
                            modifier = Modifier.padding(top = 8.dp, bottom = 8.dp)
                        )
                    }
                    TextButton(
                        onClick = {
                        shouldDismiss.value = true
                        },
                        modifier = Modifier.weight(1f)
                    ) {
                        Text(
                            "Allow",
                            fontWeight = FontWeight.ExtraBold,
                            color = Color.White,
                            modifier = Modifier.padding(top = 8.dp, bottom = 8.dp)
                        )
                    }
                }
            }
        }
    }
}

`

Answer 1

首先，你应该进行设置onDismissRequest，我想在你的情况下会是这样shouldDismiss.value = true。那么你应该根据shouldDismiss值隐藏对话框。为了隐藏，您应该Dialog {...根据条件停止在代码中调用函数。例如通过添加快速返回if (shouldDismiss.value) return。最后它看起来像这样：

@Composable
fun InfoDialog() {
    val shouldDismiss = remember {
        mutableStateOf(false)
    }

    if (shouldDismiss.value) return
 
    Dialog(onDismissRequest = {
        shouldDismiss.value = true
    }, properties = DialogProperties(
        dismissOnBackPress = true,
        dismissOnClickOutside = true
    )) {
        Card(
            shape = RoundedCornerShape(8.dp),
            modifier = Modifier.padding(16.dp,8.dp,16.dp,8.dp),
            elevation = 8.dp
        ) {
            Column(
                Modifier.background(c282534)) {
                Column(modifier = Modifier.padding(16.dp)) {
                    Text(
                        text = "Notice",
                        textAlign = TextAlign.Center,
                        modifier = Modifier
                            .padding(top = 8.dp)
                            .fillMaxWidth(),
                        style = TextStyle(fontWeight = FontWeight.Bold, color = Color.White, fontSize = 24.sp),
                        maxLines = 2,
                        overflow = TextOverflow.Ellipsis
                    )
                    Text(
                        text = "Allow Permission to send you notifications when important update added.",
                        textAlign = TextAlign.Center,
                        modifier = Modifier
                            .padding(top = 8.dp, start = 24.dp, end = 24.dp)
                            .fillMaxWidth(),
                        style = TextStyle(color = Color.White, fontSize = 16.sp)
                    )
                }
                Row(
                    Modifier
                        .fillMaxWidth()
                        .padding(top = 8.dp),
                    horizontalArrangement = Arrangement.SpaceAround) {

                    TextButton(onClick = {
                        shouldDismiss.value = true
                    }, modifier = Modifier.weight(1f)) {

                        Text(
                            "Close",
                            fontWeight = FontWeight.Normal,
                            color = Color.White,
                            modifier = Modifier.padding(top = 8.dp, bottom = 8.dp)
                        )
                    }
                    TextButton(
                        onClick = {
                        shouldDismiss.value = true
                        },
                        modifier = Modifier.weight(1f)
                    ) {
                        Text(
                            "Allow",
                            fontWeight = FontWeight.ExtraBold,
                            color = Color.White,
                            modifier = Modifier.padding(top = 8.dp, bottom = 8.dp)
                        )
                    }
                }
            }
        }
    }
}

Answer 2

只要对话框是组合层次结构的一部分，它就是可见的。你应该使用类似的东西：

val shouldShowDialog = remember { mutableStateOf(true) }

if (shouldShowDialog.value) {

    Dialog(onDismissRequest = { shouldShowDialog.value = false }) {            
        Button(onClick = {shouldShowDialog.value = false}){
                Text("Close")
        }
    }
}

设置shouldShowDialog为false忽略Dialog. 并显示刚刚设置shouldShowDialog为true。就像是：

Button(onClick = {shouldShowDialog.value = true}){
    Text("Open")
}