[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
示例类似的接口。