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中，

1. icon用于显示图标
2. title用于显示标题
3. text用于显示内容
4. confirmButton用于显示确认按钮
5. 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 dialog
            Card(
                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("确认")
                        }
                    }
                }
            }
        }
    }
}

    运行效果如下图所示

    在本例中，Dialog的子控件是一个Card控件，Card控件的子控件为Column，Column的子控件有Image、Text、和Row，Row的子空间是2给TextButton。除了上面的样式，在Card容器中可以根据想要达到的效果添加不同的控件，从而得到自定义布局的Dialog。

示例代码已上传到github，地址如下

示例工程代码