Jetpack：017-Jetpack中的对话框

news2024/11/14 1:35:07

文章目录

1. 概念介绍
2. 使用方法
- 2.1 创建对话框
- 2.2 弹出对话框
3. 示例代码
4. 内容总结

我们在上一章回中介绍了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)
）