@Composable funck。进入 onClick 事件 - Jetpack Compose

Question

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

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

几个小时后在 google 中搜索我尝试自己的解决方案

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

但在我看来这是 crutch/kludge

Answer 1

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

Hoist the state 你的对话。

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

@Composable funck。进入 onClick 事件 - Jetpack Compose

@Composable funck. into onClick event - Jetpack Compose

android

material-design

android-jetpack

android-jetpack-compose