onClick 事件中的 @Composable 函数 - Jetpack Compose

Question

我尝试在按下按钮时显示 AlertDialog。对于 AlertDialog 我有一个可组合函数 - showDialog。很明显这个函数调用了一个对话框。我有另一个可组合函数，它显示一些带有文本和按钮的窗口。单击按钮时，我想调用一个存储 AlertDialog 的函数。

警报对话框主体：

fun monthDialog() {

val openDialog = remember { mutableStateOf(true) }

if (openDialog.value) {
    AlertDialog(
        onDismissRequest = {
            openDialog.value = false
        },
        title = {
            Text(text = "Title")
        },
        text = {
            Text(
                "This area typically contains the supportive text " +
                        "which presents the details regarding the Dialog's purpose."
            )
        },
        buttons = {
            Row(
                modifier = Modifier.padding(all = 8.dp),
                horizontalArrangement = Arrangement.Center
            ) {
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = { openDialog.value = false }
                ) {
                    Text("Dismiss")
                }
            }
        }
    )
}

首先我尝试了我想到的最简单的解决方案：

IconButton(onClick = monthDialog())

并收到错误（@Composable 调用只能在 @Composable 函数的上下文中发生）

在我使用 mutablestateof 和以下条件尝试正常触发器之后：

val showDialog = remember { mutableStateOf(false)}
if(showDialog.value == true) monthDialog()

并将这样的内容放入 onClick 事件中：

monthHeader(onClick = {showDialog.value = !showDialog.value})

这就是工作……但又丑又糟糕。这是第一次，这很好。但第一次点击后，我需要再点击两次才能再次触发该事件。

按钮代码片段：

fun Calendar (){
//...

val showDialog = remember { mutableStateOf(false)}
if(showDialog.value == true) monthDialog()

Card(
){
    Column(){
            IconButton(onClick ={
                monthDialog() // error here
                //showDialog.value = !showDialog.value
            }
    }
}

在谷歌搜索几个小时后，我尝试了自己的解决方案

val clicked = remember { mutableStateOf(false)}
val showDialog = remember { mutableStateOf(false)}

if(showDialog.value) monthDialog()
else if(clicked.value) monthDialog()

Card(){
    Column(){
        monthHeader(onClick = {
            clicked.value = showDialog.value
            showDialog.value = !clicked.value
        })
    }
}

但在我看来，这是拐杖/拼凑

Answer 1

在这里留下更好的解决方案（恕我直言）：

提升对话框的状态。

@Composable
fun MonthDialog(onClose: () -> Unit) {
    AlertDialog(
        onDismissRequest = onClose,
        title = {
            Text(text = "Title")
        },
        text = {
            Text(
                "This area typically contains the supportive text " +
                        "which presents the details regarding the Dialog's purpose."
            )
        },
        buttons = {
            Row(
                modifier = Modifier.padding(all = 8.dp),
                horizontalArrangement = Arrangement.Center
            ) {
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = onClose
                ) {
                    Text("Dismiss")
                }
            }
        }
    )

注意到我从此组件中删除了状态并使其无状态。该组件只会在对话框关闭时发出通知。

现在您可以像这样调用对话框：

var showDialog by remember { mutableStateOf(false) }
if (showDialog) {
    MonthDialog(onClose = { showDialog = false })
}
Card {
    MonthHeader( // use upper case for naming your composables
        onClick = {
            showDialog = true
        }
    )
}