显示确认对话框并在同一按钮的点击回调中获取答案

Question

目前，当我想显示确认对话框时，我通过使用

confirmationDialogVisible

等变量控制其可见性并将实际 API 连接到

confirmButton

的

AlertDialog

回调来实现。

我发现这种方法非常不方便，因为你很快就会忘记所谓的地点和条件。在此示例中，只有一个对话框，但如果需要更多对话框，这很快就会变得一团糟。

所以，我想知道 Jetpack Compose 中是否有一种方法可以显示一个对话框，并在同一个

Button

的

onClick

回调中获取答案，就像在

// pseudocode

注释下面一样？

class Model {
    fun delete() {
        // performs deletion
        println("Delete!")
    }
}

@Composable
fun Demo() {
    val model = remember { Model() }
    var confirmationDialogVisible by remember { mutableStateOf(false) }
    Button(
        onClick = {
            // doesn't call the delete API, but shows a dialog
            confirmationDialogVisible = true
            
            // psedudocode
            if(showConfirmationDialog()) { // <-- How can I achieve this?
                model.delete()
            }
        }
    ) { Text("Delete") }

    if (confirmationDialogVisible) {
        AlertDialog(
            onDismissRequest = { confirmationDialogVisible = false },
            confirmButton = {
                // dialog calls the delete API
                model.delete()
            },
            dismissButton = { confirmationDialogVisible = false }
        )
    }
}

Answer 1

这是一个解决方案，当您使 AlertDialog 对用户可见时，您可以传递模型的值。

当用户单击“是”时，它将返回该记录或完整对象的 ID，然后您可以执行任务。

示例 我制作了一个示例 ViewModel 以便于理解和数据类，您可以根据自己的选择进行自定义。

ViewModel

使用简单的删除方法，该方法将接收 id 并继续从数据库或 API 中删除记录。

class MyViewModel : ViewModel() {
    fun delete(id: Int) {
        println("Delete Record $id")
    }
}

您可以根据自己的意愿更改示例数据类

data class MyData(
    val id: Int,
    val name: String
)

这是一个完整的示例。

@Composable
fun Stack014() {

    val viewModel = viewModel<MyViewModel>()

    val clearAllMessageDialog = remember { mutableStateOf(false) }

    if (clearAllMessageDialog.value) {
        openDialog(
            myData = MyData(1, "Name"),
            onConfirm = { id ->
                clearAllMessageDialog.value = false
                viewModel.delete(id)
            }) {
            clearAllMessageDialog.value = false
        }
    }

    Column(Modifier.fillMaxSize()) {
        Button(onClick = { clearAllMessageDialog.value = true }) {
            Text(text = "Open Dialog")
        }
    }

}

@Composable
fun openDialog(
    myData: MyData,
    onConfirm: (Int) -> Unit,
    onDismiss: () -> Unit,
) {

    AlertDialog(
        onDismissRequest = {
            onDismiss()
        },
        title = {
            Text(
                text = "Delete Record",
                fontWeight = FontWeight.Bold,
                fontSize = 16.sp
            )
        },
        text = {
            Text(
                "Do you want to delete record?",
                fontSize = 16.sp
            )
        },
        confirmButton = {
            TextButton(
                onClick = {
                    onConfirm(myData.id)
                }) {
                Text("Yes", style = TextStyle(color = Color.Black))
            }
        },
        dismissButton = {
            TextButton(
                onClick = {
                    onDismiss()
                }) {
                Text("No", style = TextStyle(color = Color.Black))
            }
        },
    )
}

快乐创作。