Jetpack：017

编程入门行业动态更新时间:2024-10-12 18:23:49

Jetpack：017

文章目录

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是否会消失，默认值为trueproperties = 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)
）