无法在 Jetpack Compose 中的 onClick 中显示 AlertDialog

Question

我一直在尝试在 Android Jetpack Compose 的动态列表中显示AlertDialogfrom 。onClickCard

我在执行此操作时收到编译时错误@Composable 调用只能从 @Composable 函数的上下文中发生。

下面是我的代码片段：

@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()从上面的代码调用的可组合函数

@Composable
fun alert(card : Card) {
    AlertDialog(
        title = {
            Text("")
        },
        text = {
            Text(text = card.name)
        }, onDismissRequest = {
        },
        confirmButton = {},
        dismissButton = {}
    )
}

如图所示，我收到编译时错误

请帮忙解决这个问题

笔记 ：

我尝试过如下修改，它解决了编译时错误，但AlertDialog单击时仍然没有显示Card

@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
            }) {
            ...
           }
         }

Answer 1

使用remember您的showDialog来解决不显示 的问题AlertDialog。

val showDialog = remember { mutableStateOf(false) }
if (showDialog.value) {
     // alert...
}
Card() {
   Column(Modifier.clickable(
     onClick = {showDialog.value = true})
   ) {}
}

另外，在您的Alert()函数中，您应该处理状态。

@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})
    ) {}
}