Jetpack Compose 对话框

`Dialog`\] 组件会在主应用内容上方的一层显示弹出消息或请求用户输入。它可以打造干扰性界面体验，以吸引用户的注意力。 对话框的用例如下： * 确认用户操作，例如删除文件时。 * 请求用户输入，例如在待办事项列表应用中。 * 显示用于用户选择的选项列表，例如在个人资料设置中选择国家/地区。 ## 提醒对话框 \[`AlertDialog`\] 可组合项提供了一个便捷的 API，用于创建 Material Design 主题对话框。`AlertDialog` 具有用于处理对话框特定元素的特定参数。其中包括： * `title`：沿对话框顶部显示的文本。 * `text`：显示在对话框中心的文本。 * `icon`：显示在对话框顶部的图形。 * `onDismissRequest`：当用户关闭对话框（例如点按对话框外面）时调用的函数。 * `dismissButton`：用作关闭按钮的可组合项。 * `confirmButton`：充当"确认"按钮的可组合项。 以下示例在提醒对话框中实现了两个按钮，一个用于关闭对话框，另一个用于确认其请求。  ```ts /** * 调用的地方 */ @Composable private fun example1() { val showDialog = remember { mutableStateOf(false) } Column { customTitle(title = "提醒对话框 效果") Button(modifier = Modifier.padding(start = 15.dp), onClick = { showDialog.value = true }) { Text("显示对话框") } if (showDialog.value) { AlertDialogExample(onDismissRequest= { showDialog.value = false }, onConfirmation = { showDialog.value = false }, dialogTitle = "对话框标题", dialogText = "对话框内容", icon = Icons.Default.Info) } CodeView(assetUrl = "component/dialog/code1.txt", modifier = Modifier.padding(top = 10.dp)) } } /** * 实现的地方 */ @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") } } ) } ``` ## 对话框可组合项 \[`Dialog`\] 是一个基本的可组合项，不提供任何样式设置或预定义的内容槽。它是一个相对简单的容器，您应该使用 `Card` 等容器填充该容器。以下是对话框的一些关键参数： * **`onDismissRequest`**：用户关闭对话框时调用的 lambda。 * **`properties`** ：\[`DialogProperties`\] 的实例，提供一些额外的自定义范围。 ### 基本示例 以下示例是 `Dialog` 可组合项的基本实现。请注意，它使用 `Card` 作为辅助容器。如果没有 `Card`，`Text` 组件将单独显示在主应用内容的上方。  ```ts /** * 调用的地方 */ @Composable private fun example2() { val showDialog = remember { mutableStateOf(false) } Column { customTitle(title = "可组合对话框 效果") Button(modifier = Modifier.padding(start = 15.dp), onClick = { showDialog.value = true }) { Text("显示对话框") } if (showDialog.value) { MinimalDialog(onDismissRequest = { showDialog.value = false }) CodeView( assetUrl = "component/dialog/code1.txt", modifier = Modifier.padding(top = 10.dp) ) } } } @Composable fun MinimalDialog(onDismissRequest: () -> Unit) { Dialog(onDismissRequest = { onDismissRequest() }) { Card( modifier = Modifier .fillMaxWidth() .height(200.dp) .padding(16.dp), shape = RoundedCornerShape(16.dp), ) { Text( text = "This is a minimal dialog", modifier = Modifier .fillMaxSize() .wrapContentSize(Alignment.Center), textAlign = TextAlign.Center, ) } } } ``` ### 高级示例 以下是 `Dialog` 可组合项的更高级实现。在这种情况下，该组件会手动实现与上述 `AlertDialog` 示例类似的接口。  [上一篇 Jetpack Compose 抽屉式导航栏](https://juejin.cn/post/7354670092652675124 "https://juejin.cn/post/7354670092652675124")