Jetpack Compose - AlertDialog

Compose系列文章，请点原文阅读。原文，是时候学习Compose了！

0、介绍

AlertDialog是一个用紧急信息，详细信息或操作打断用户的对话框。

1、属性一览

【目前基于alpha09版本】请看该对话框支持的两个函数，首先看第一个函数，该函数会根据可用空间水平放置其按钮：

@Composable fun AlertDialog(
    onDismissRequest: () -> Unit, 
    confirmButton: () -> Unit, 
    modifier: Modifier = Modifier, 
    dismissButton: () -> Unit = null, 
    title: () -> Unit = null, 
    text: () -> Unit = null, 
    shape: Shape = MaterialTheme.shapes.medium, 
    backgroundColor: Color = MaterialTheme.colors.surface, 
    contentColor: Color = contentColorFor(backgroundColor), 
    properties: DialogProperties? = null
): Unit

@Composable fun AlertDialog(
    onDismissRequest: () -> Unit, 
    buttons: () -> Unit, 
    modifier: Modifier = Modifier, 
    title: () -> Unit = null, 
    text: () -> Unit = null, 
    shape: Shape = MaterialTheme.shapes.medium, 
    backgroundColor: Color = MaterialTheme.colors.surface, 
    contentColor: Color = contentColorFor(backgroundColor), 
    properties: DialogProperties? = null
): Unit

属性参数含义：

参数	含义
modifier: Modifier = Modifier	应用于布局的修饰符
onDismissRequest: () -> Unit	当用户点击对话框外部或者按下返回按钮的时候会执行。注意：点击对话框的关闭按钮时并不会执行
confirmButton: () -> Unit	一个由用户确认操作的按钮，默认没有回调，需要调用者自行设置回调事件。
dismissButton: () -> Unit = null	一个用于关闭对话框的按钮，默认没有回调，需要调用者自行设置回调事件。
title: () -> Unit = null	对话框的标题，默认无
text: () -> Unit = null	对话框的内容，默认无
shape: Shape = MaterialTheme.shapes.medium	对话框的形状
backgroundColor: Color = MaterialTheme.colors.surface	对话框的背景色
contentColor: Color = contentColorFor(backgroundColor)	提供给其子级的首选内容颜色
properties: DialogProperties? = null	用于进一步配置特定属性的对话框

第二个函数如下：

@Composable fun AlertDialog(
    onDismissRequest: () -> Unit, 
    buttons: () -> Unit, 
    modifier: Modifier = Modifier, 
    title: () -> Unit = null, 
    text: () -> Unit = null, 
    shape: Shape = MaterialTheme.shapes.medium, 
    backgroundColor: Color = MaterialTheme.colors.surface, 
    contentColor: Color = contentColorFor(backgroundColor), 
    properties: DialogProperties? = null
): Unit

跟第一个函数的区别在于按钮可以自定义了：

参数	含义
buttons: () -> Unit	可以自定义按钮的摆放位置及功能

2、使用示例

代码如下：

@Composable
fun DialogDemo() {
    val openDialog = remember { mutableStateOf(true) }

    if (openDialog.value) {
        AlertDialog(
            onDismissRequest = {
                openDialog.value = false
            },
            title = {
                Text(text = "这是对话框标题")
            },
            text = {
                Text(
                    "这是一段描述对话框提示内容的文本， " +
                            "这个文本有点长，还有点俏皮！"
                )
            },
            confirmButton = {
                TextButton(
                    onClick = {
                        openDialog.value = false
                    }
                ) {
                    Text("确认")
                }
            },
            dismissButton = {
                TextButton(
                    onClick = {
                        openDialog.value = false
                    }
                ) {
                    Text("取消")
                }
            }
        )
    }
}

实现效果如下所示：

关于第二个函数就是自定义按钮了，你可以使用Row、Column等布局来实现各种摆放方式不同的按钮，这里不再示例。

当我们查看AlertDialog源码的时候我们可以发现，第一个函数继承自第二个函数，而第二个函数又继承自androidx.compose.ui.window.Dialog，当我们需要自定义特殊对话框样式的时候就可以继承自该函数。

3、版本更新

• 暂无

4、未解决问题

暂无。在之前的话我们如果要在工具类中弹出对话框，需要获取到顶层的Activity等，然后判断是否在销毁状态各种的然后才可以确保能正确弹出对话框。但是通过Compose的对话框我们发现，完全没有Context的要求了，但是别高兴太早，AlertDialog要求我们只能在Compose函数中使用，这又是一个障碍。