Dialogfeld

Die Komponente Dialog zeigt Dialogmeldungen an oder fordert Nutzereingaben auf einer Ebene über dem Hauptinhalt der App an. Sie schafft eine unterbrechende UI-Erfahrung, um die Aufmerksamkeit der Nutzer zu gewinnen.

Zu den Anwendungsfällen für ein Dialogfeld gehören:

• Bestätigen einer Nutzeraktion, z. B. beim Löschen einer Datei.
• Nutzereingaben anfordern, z. B. in einer To-do-Listen-App.
• Präsentieren einer Liste von Optionen für die Nutzerauswahl, z. B. die Auswahl eines Landes bei der Profileinrichtung.

Abbildung 1. Beispiel für ein Dialogfeld mit Text und Symbolen.

Dialogfeld einer Benachrichtigung

Das Compose-Element AlertDialog bietet eine praktische API zum Erstellen eines Dialogfelds im Material Design-Stil. AlertDialog hat spezifische Parameter für die Verarbeitung bestimmter Elemente des Dialogs. Dazu gehören:

• title: Der Text, der oben im Dialogfeld angezeigt wird.
• text: Der Text, der zentriert im Dialogfeld 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 außerhalb des Dialogfelds.
• dismissButton: Eine komponierbare Funktion, die als Schaltfläche zum Schließen dient.
• confirmButton: Ein Composable, das als Bestätigungsschaltfläche dient.

Im folgenden Beispiel werden zwei Schaltflächen in einem Benachrichtigungsdialogfeld implementiert: eine, mit der das Dialogfeld geschlossen wird, und eine, mit der die Anfrage bestätigt wird.

@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.kt

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
                )
            }
        }
    }
}
Dialog.kt

Diese Implementierung sieht so aus:

Abbildung 2. Ein Warndialogfeld mit Schaltflächen.

Hinweis: Wenn der Nutzer auf eine der Schaltflächen klickt, wird das Dialogfeld geschlossen. Wenn der Nutzer auf „Bestätigen“ klickt, wird eine Funktion aufgerufen, die auch die Bestätigung verarbeitet. In diesem Beispiel sind diese Funktionen onDismissRequest() und onConfirmRequest().

Hinweis: Wenn Ihr Dialogfeld eine komplexere Reihe von Schaltflächen erfordert, kann es sinnvoll sein, das Compose-Element Dialog zu verwenden und es freier zu füllen.

Dialog-Composable

Dialog ist eine einfache zusammensetzbare Funktion, die keine Stile oder vordefinierten Slots für Inhalte bietet. Es ist ein relativ einfacher Container, den Sie mit einem Container wie Card füllen sollten. Im Folgenden sind einige der wichtigsten Parameter eines Dialogs aufgeführt:

• onDismissRequest: Die Lambda-Funktion, die aufgerufen wird, wenn der Nutzer das Dialogfeld schließt.
• properties: Eine Instanz von DialogProperties, die zusätzlichen Spielraum für Anpassungen bietet.

Achtung: Im Gegensatz zum Beispiel für AlertDialog im vorherigen Abschnitt müssen Sie die Größe und Form von Dialog manuell angeben. Sie müssen auch einen inneren Container angeben.

Einfaches Beispiel

Das folgende Beispiel ist eine einfache Implementierung der zusammensetzbaren Funktion Dialog. Beachten Sie, dass Card als sekundärer Container verwendet wird. Ohne Card würde die Komponente Text allein über dem Hauptinhalt der App angezeigt werden.

@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.kt

Diese Implementierung sieht so aus: Wenn das Dialogfeld geöffnet ist, wird der Hauptinhalt der App darunter abgedunkelt und ausgegraut:

Abbildung 3: Minimaler Dialog.

Erweitertes Beispiel

Im Folgenden finden Sie eine komplexere Implementierung der zusammensetzbaren Funktion Dialog. In diesem Fall implementiert die Komponente manuell eine ähnliche Schnittstelle wie im vorherigen AlertDialog-Beispiel.

Achtung: Wenn Sie wie in diesem Beispiel nur ein Dialogfeld mit zwei Schaltflächen anzeigen müssen, sollten Sie AlertDialog und die entsprechende API verwenden. Wenn Sie jedoch einen komplexeren Dialog erstellen möchten, z. B. mit Formularen und mehreren Schaltflächen, sollten Sie Dialog mit benutzerdefinierten Inhalten verwenden, wie im folgenden Beispiel.

@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")
                    }
                }
            }
        }
    }
}
Dialog.kt

Diese Implementierung sieht so aus:

Abbildung 4. Ein Dialogfeld mit einem Bild.

Zusätzliche Ressourcen

• Material UI-Dokumentation