Jetpack：017-Jetpack中的对话框

我们在上一章回中介绍了Jetpack库中SnackBar相关的内容，本章回中主要介绍 对话框。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

我们在本章回中介绍的Dialog就是常用的对话框，主要用来给用户发出提示消息，这一点与上一章回中介绍过使用SnackBar相同，不过它发出的消息不会自动消失，需要用户确认后才会消失，因此对话框常常用来发出需要用户确认的消息。我们将在本章回中详细介绍对话框的使用方法。

2. 使用方法

2.1 创建对话框

在Jetpack compose库中使用AlertDialog可组合函数可以创建对话框，该函数提供了相关的参数来控制自己，下面是常用的参数：

• onDismissRequest:当对话框关闭时执行相关操作；
• confirmButton: 主要用来存放确认按钮；
• dismissButton: 主要用来存放取消按钮；
• icon:主要用来控制对话框中显示的图标；
• title:主要用来控制对话框中显示的标题；
• text:主要用来控制对话框中显示的消息内容；
• containerColor:主要用来控制对话框的背景颜色；
• iconContentColor:主要用来控制对话框中图标的颜色；
• titleContentColor:主要用来控制对话框中标题的颜色；
• textContentColor:主要用来控制对话框中内容的颜色；
• properties: 配置对话的属性，常用来配置点击对话框外的窗口时是否关闭对话框；

上面介绍的这些参数都是用来控制对话框的，给它们赋值后就可以创建一个对话框，不过这个对话框会一起显示在页面中，这显然不符合使用场景：当某个条件触发时弹出对话框，给用户相关提示信息，让用户进行确认。接下来我们将介绍如何控制对话框的显示与关闭。

2.2 弹出对话框

我们需要使用一个条件值，然后对该条件值进行判断，如果条件值符合某种条件就弹出对话框，否则不弹出对话框。而且我们还需要在对话框窗口中修改条件值，这样可以在点击对话框窗口中的按钮时关闭对话框。这么介绍可能比较抽象，稍后我们通过具体的代码来演示。

3. 示例代码

//显示对话框
@Composable
fun ExDialog(
    onDismissRequest:  () ->Unit,
    onConfirmation:() -> Unit,
    title: String,
    message: String,
    icon: ImageVector
) {

    AlertDialog(
        icon = { Icon(imageVector = icon, contentDescription = null)},
        title = { Text(text = title)},
        text = { Text(text = message)},
        //控制dialog中文字，标题、图标的颜色,不过没有包含底部yes/no两个文字的颜色
        containerColor = Color.LightGray,
        textContentColor = Color.Black,
        titleContentColor = Color.Red,
        iconContentColor = Color.Yellow,
        //这两个值用来控制点击dialog区域外时,dialog是否会消失，默认值为true
        properties = DialogProperties(
            dismissOnClickOutside = false,
            dismissOnBackPress = false,
        ),
        onDismissRequest = {onConfirmation()},
        confirmButton = {
            TextButton(onClick = {onConfirmation()}) {
                Text(text = "Yes")
            }
        },
        dismissButton = {
            TextButton(onClick = {onDismissRequest()}) {
                Text(text = "No",color = Color.Black )
            }
        }
    )
}

//弹出对话框
@Composable
fun ShowDialog(showDialog:MutableState<Boolean>){
    when {
        showDialog.value -> {
            ExDialog(
                onDismissRequest = {  showDialog.value = false},
                onConfirmation = { showDialog.value = false },
                title = "Title of AlertDialog",
                message = "Message of AlertDialog",
                icon = Icons.Default.Warning
            )
        }
    }
}

//通过点击按钮弹出对话框
val showDialog = remember { mutableStateOf(false) }

Column (
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.SpaceAround){
    //点击按钮显示图标
    ElevatedButton(onClick = {
        showDialog.value = true
    }) {
        Text(text = "Show Dialog")
    }

    ShowDialog(showDialog)
）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

上面的示例代码中对相关功能进行了封装，把每一个功能都封装成了独立的函数，大家查看函数前面的注释就能明白函数的功能。下面是程序的运行效果图：

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• 对话框主要用来显示需要用户确认的信息；
• 对话框通过AlertDialog可组合函数实现；
• 对话框需要配合条件值来显示，这样才能符合使用场景；
• 点击对话框中的按钮时可以关闭对话框；
• 点击对话框以外的任何内容也可以关闭对话框，不过这个属性可以进行单独配置；

看官们，与Jetpack中对话框相关的内容就介绍到这里，欢迎大家在评论区交流与讨论！