[英]setOnKeyListener for AlertDialog in jetpack compose
[英]Not able to show AlertDialog from onClick in Jetpack Compose
我一直试图在Card
onClick
AlertDialog
的 AlertDialog。
我收到编译时错误@Composable 调用只能在@Composable function 的上下文中发生。
下面是我的代码片段:
@Preview(showBackground = true)
@Composable
fun prepareCard(card: Card) {
MyApplicationTheme() {
androidx.compose.material.Card() {
Column(Modifier.clickable {
Log.d("TAG", "clicked : " + card.name)
val showDialog = mutableStateOf(true)
if (showDialog.value) {
alert(card)
}
...
}
}
}
我已经从上面的代码中调用了alert()
可组合 function
@Composable
fun alert(card : Card) {
AlertDialog(
title = {
Text("")
},
text = {
Text(text = card.name)
}, onDismissRequest = {
},
confirmButton = {},
dismissButton = {}
)
}
如图所示,我收到编译时错误
请帮助解决这个问题
笔记:
我已经尝试过如下修改,它解决了编译时错误,但点击Card
时仍然没有显示AlertDialog
@Preview(showBackground = true)
@Composable
fun prepareCard(card: Card) {
MyApplicationTheme() {
val showDialog = mutableStateOf(false)
if (showDialog.value) {
alert(card)
}
androidx.compose.material.Card() {
Column(Modifier.clickable {
Log.d("kushal", "clicked : " + card.name)
showDialog.value = true
}) {
...
}
}
使用showDialog
中的remember
来解决不显示AlertDialog
的问题。
val showDialog = remember { mutableStateOf(false) }
if (showDialog.value) {
// alert...
}
Card() {
Column(Modifier.clickable(
onClick = {showDialog.value = true})
) {}
}
同样在您的Alert()
function 中,您应该处理 state。
@Composable
fun Alert(name: String,
showDialog: Boolean,
onDismiss: () -> Unit) {
if (showDialog) {
AlertDialog(
title = {
Text("Title")
},
text = {
Text(text = name)
},
onDismissRequest = onDismiss,
confirmButton = {
TextButton(onClick = onDismiss ) {
Text("OK")
}
},
dismissButton = {}
)
}
}
并调用它:
val showDialog = remember { mutableStateOf(false) }
Card() {
if (showDialog.value) {
Alert(name = "Name",
showDialog = showDialog.value,
onDismiss = {showDialog.value = false})
}
Column(Modifier.clickable(
onClick = {showDialog.value = true})
) {}
}
您可以像下面的代码一样更新您的代码 ->
@Composable
fun alert() {
MaterialTheme {
Column {
val openDialog = remember { mutableStateOf(false) }
Button(onClick = {
openDialog.value = true
}) {
Text("Click me")
}
if (openDialog.value) {
AlertDialog(
onDismissRequest = {
// Dismiss the dialog when the user clicks outside the dialog or on the back
// button. If you want to disable that functionality, simply use an empty
// onCloseRequest.
openDialog.value = false
},
title = {
Text(text = "Dialog Title")
},
text = {
Text("Here is a text ")
},
confirmButton = {
Button(
onClick = {
openDialog.value = false
}) {
Text("This is the Confirm Button")
}
},
dismissButton = {
Button(
onClick = {
openDialog.value = false
}) {
Text("This is the dismiss Button")
}
}
)
}
}
}
}
这是使用状态显示对话框的推荐方式。
val openDialog = remember { mutableStateOf(true) }
val dialogWidth = 200.dp
val dialogHeight = 50.dp
if (openDialog.value) {
Dialog(onDismissRequest = { openDialog.value = false }) {
// Draw a rectangle shape with rounded corners inside the dialog
Box(Modifier.size(dialogWidth, dialogHeight).background(Color.White))
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.