Android开发系列（十一）Jetpack Compose之Dialog

Dialogs是在应用程序中显示一些额外信息或进行用户交互的常见功能。Jetpack Compose中的Dialog可以通过使用AlertDialog组件来创建。

基本用法

下面通过示例来了解Dialog的使用。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AlertDialogExample(onDismissRequest: () -> Unit,onConfirmation: () -> Unit,dialogTitle: String,dialogText: String,icon: ImageVector,
) {AlertDialog(icon = {Icon(icon, contentDescription = "Example Icon")},title = {Text(text = dialogTitle)},text = {Text(text = dialogText)},onDismissRequest = {onDismissRequest()},confirmButton = {TextButton(onClick = {onConfirmation()}) {Text("Confirm")}},dismissButton = {TextButton(onClick = {onDismissRequest()}) {Text("Dismiss")}})
}

运行效果如下图所示。

在AlertDialog中，

icon用于显示图标
title用于显示标题
text用于显示内容
confirmButton用于显示确认按钮
dismissButton用于显示取消按钮

自定义对话框布局

AlertDialog使用内置的布局，

@Composable
fun DialogWithImage(onDismissRequest: () -> Unit,onConfirmation: () -> Unit,painter: Painter,imageDescription: String,
) {var showDialog by remember {mutableStateOf(true)}if(showDialog){Dialog(onDismissRequest = { onDismissRequest() }) {// Draw a rectangle shape with rounded corners inside the dialogCard(modifier = Modifier.fillMaxWidth().height(375.dp).padding(16.dp),shape = RoundedCornerShape(16.dp),) {Column(modifier = Modifier.fillMaxSize(),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally,) {Image(painter = painter,contentDescription = imageDescription,contentScale = ContentScale.Fit,modifier = Modifier.height(160.dp))Text(text = "带按钮和图片的弹框",modifier = Modifier.padding(16.dp),)Row(modifier = Modifier.fillMaxWidth(),horizontalArrangement = Arrangement.Center,) {TextButton(onClick = { onDismissRequest()showDialog = !showDialog},modifier = Modifier.padding(8.dp),) {Text("取消")}TextButton(onClick = { onConfirmation()showDialog = !showDialog},modifier = Modifier.padding(8.dp),) {Text("确认")}}}}}}
}

运行效果如下图所示