[英]How to dismiss a composable dialog?
I am a new in jetpack compose and I really wanted to know how I can dismiss a composable dialog.我是 Jetpack Compose 的新手,我真的很想知道如何关闭可组合对话框。 Is there any function like dismiss() for dialog in jetpack compose? Jetpack Compose 中是否有类似 dismiss() 的 function 对话框?
By using below code, I cannot dismiss the dialog either touching outside or pressing back button.通过使用下面的代码,我无法关闭对话框,无论是触摸外部还是按下后退按钮。 The dialog just still is visible on the top of view hierarchy.该对话框在视图层次结构的顶部仍然可见。 ` `
@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)
)
}
}
}
}
}
}
` `
First, you should setup onDismissRequest
, I guess in your case it will be shouldDismiss.value = true
.首先,您应该设置onDismissRequest
,我想在您的情况下它将是shouldDismiss.value = true
。 Then you should hide Dialog based on shouldDismiss
value.然后你应该根据shouldDismiss
值隐藏对话框。 In order to hide you should just stop invoking Dialog {...
function in your code based on condition.为了隐藏,您应该根据条件停止在代码中调用Dialog {...
function。 Eg by adding fast return if (shouldDismiss.value) return
.例如,通过添加快速返回if (shouldDismiss.value) return
。 Finally it will look like this:最后它看起来像这样:
@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)
)
}
}
}
}
}
}
The dialog is visible as long as it is part of the composition hierarchy.只要对话框是组合层次结构的一部分,它就是可见的。 You should use something like:你应该使用类似的东西:
val shouldShowDialog = remember { mutableStateOf(true) }
if (shouldShowDialog.value) {
Dialog(onDismissRequest = { shouldShowDialog.value = false }) {
Button(onClick = {shouldShowDialog.value = false}){
Text("Close")
}
}
}
Setting shouldShowDialog
to false
dismisses the Dialog
.将shouldShowDialog
设置为false
会关闭Dialog
。 And to show just set shouldShowDialog
to true
.并显示只需将shouldShowDialog
设置为true
。 Something like:就像是:
Button(onClick = {shouldShowDialog.value = true}){
Text("Open")
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.