@可组合功能。 进入 onClick 事件 - 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
        })
    }
}

但在我看来，这是拐杖/kludge

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

Answer 2

也可以使用Modifier / PointerInputScope ：

modifier = Modifier.pointerInput(Unit) {
    detectTapGestures(
        onPress = { },
        onTap = { },
        onDoubleTap = { },
        onLongPress = { }
    )