Mit der Komponente Dialog werden Pop-up-Nachrichten oder Nutzereingaben in einer Ebene über dem Hauptinhalt der App angezeigt. Sie schafft eine störende UI, um die Aufmerksamkeit der Nutzer zu gewinnen.
Ein Dialogfeld kann unter anderem in folgenden Fällen eingesetzt werden:
- Bestätigung der Nutzeraktion, z. B. das Löschen einer Datei.
- Nutzereingabe anfordern, z. B. in einer To-do-Listen-App
- Sie präsentieren eine Liste mit Optionen für die Nutzerauswahl, z. B. die Auswahl eines Landes in einer Profileinrichtung.
Dialogfeld einer Benachrichtigung
Die zusammensetzbare Funktion AlertDialog bietet eine praktische API zum Erstellen eines Dialogfelds mit Material Design-Thema. AlertDialog hat bestimmte Parameter für die Verarbeitung bestimmter Elemente des Dialogfelds. Dazu gehören:
title: Der Text, der oben im Dialogfeld angezeigt wird.text: Der Text, der im Dialogfeld zentriert angezeigt wird.icon: Die Grafik, die oben im Dialogfeld angezeigt wird.onDismissRequest: Die Funktion, die aufgerufen wird, wenn der Nutzer das Dialogfeld schließt, z. B. durch Tippen auf eine Stelle außerhalb des Dialogfelds.dismissButton: Eine zusammensetzbare Funktion, die als Schaltfläche zum Schließen dient.confirmButton: Eine zusammensetzbare Funktion, die als Bestätigungsschaltfläche dient.
Im folgenden Beispiel werden zwei Schaltflächen in einem Benachrichtigungsdialogfeld implementiert: eine zum Schließen des Dialogfelds und eine weitere zum Bestätigen der Anfrage.
@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")
}
}
)
}
Diese Implementierung impliziert eine übergeordnete zusammensetzbare Funktion, die Argumente so an die untergeordnete zusammensetzbare Funktion übergibt:
@Composable
fun DialogExamples() {
// ...
val openAlertDialog = remember { mutableStateOf(false) }
// ...
when {
// ...
openAlertDialog.value -> {
AlertDialogExample(
onDismissRequest = { openAlertDialog.value = false },
onConfirmation = {
openAlertDialog.value = false
println("Confirmation registered") // Add logic here to handle confirmation.
},
dialogTitle = "Alert dialog example",
dialogText = "This is an example of an alert dialog with buttons.",
icon = Icons.Default.Info
)
}
}
}
}
Diese Implementierung sieht so aus:
Dialog zusammensetzbar
Dialog ist eine einfache zusammensetzbare Funktion, die weder Stile noch vordefinierte Slots für Inhalte bietet. Es ist ein relativ einfacher Container, in den Sie einen Container wie Card einfügen sollten. Im Folgenden sind einige der wichtigsten Parameter eines Dialogfelds aufgeführt:
onDismissRequest: Die Lambda-Funktion, die aufgerufen wird, wenn der Nutzer das Dialogfeld schließt.properties: Eine Instanz vonDialogProperties, die zusätzliche Anpassungsmöglichkeiten bietet.
Einfaches Beispiel
Das folgende Beispiel zeigt eine einfache Implementierung der zusammensetzbaren Funktion Dialog. Beachten Sie, dass ein Card als sekundärer Container verwendet wird. Ohne Card erscheint die Text-Komponente für sich allein über dem Hauptinhalt der App.
@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,
)
}
}
}
Diese Implementierung sieht so aus: Beachten Sie, dass der App-Hauptinhalt darunter abgedunkelt und ausgegraut angezeigt wird, wenn das Dialogfeld geöffnet ist:
Erweitertes Beispiel
Im Folgenden finden Sie eine erweiterte Implementierung der zusammensetzbaren Funktion Dialog. In diesem Fall implementiert die Komponente manuell eine ähnliche Schnittstelle wie im AlertDialog-Beispiel oben.
@Composable
fun DialogWithImage(
onDismissRequest: () -> Unit,
onConfirmation: () -> Unit,
painter: Painter,
imageDescription: String,
) {
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 = "This is a dialog with buttons and an image.",
modifier = Modifier.padding(16.dp),
)
Row(
modifier = Modifier
.fillMaxWidth(),
horizontalArrangement = Arrangement.Center,
) {
TextButton(
onClick = { onDismissRequest() },
modifier = Modifier.padding(8.dp),
) {
Text("Dismiss")
}
TextButton(
onClick = { onConfirmation() },
modifier = Modifier.padding(8.dp),
) {
Text("Confirm")
}
}
}
}
}
}
Diese Implementierung sieht so aus:
