Dialogfeld

Die Komponente Dialog zeigt Pop-up-Nachrichten an oder fordert Nutzereingaben in einer Ebene über den Hauptinhalten der App an. Sie unterbricht die Nutzeroberfläche, um die Aufmerksamkeit der Nutzer zu erregen.

Zu den Anwendungsfällen für einen Dialog gehören:

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

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

Dialogfeld einer Benachrichtigung

Das AlertDialog-Komposit bietet eine praktische API zum Erstellen eines Dialogfelds im Material Design-Design. AlertDialog hat bestimmte 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 mittig im Dialogfeld angezeigt wird.
• icon: Die Grafik oben im Dialogfeld.
• onDismissRequest: Die Funktion, die aufgerufen wird, wenn der Nutzer das Dialogfeld schließt, z. B. indem er außerhalb davon tippt.
• dismissButton: Ein Composeable, das als Schaltfläche zum Schließen dient.
• confirmButton: Ein Composeable, das als Bestätigungsschaltfläche dient.

Im folgenden Beispiel werden zwei Schaltflächen in einem Benachrichtigungsdialogfeld implementiert, eine zum Schließen des Dialogfelds und eine zum Bestätigen der Anfrage.

@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 setzt ein übergeordnetes Composeable voraus, das dem untergeordneten Composeable auf diese Weise Argumente ü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 das onDismissRequest() und onConfirmRequest().

Hinweis: Wenn Ihr Dialogfeld eine komplexere Reihe von Schaltflächen erfordert, können Sie die Dialog-Komponente verwenden und sie freier gestalten.

Dialoge können kombiniert werden

Dialog ist ein einfaches Composeable, das kein Styling und keine 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: Der Lambda-Ausdruck, der aufgerufen wird, wenn der Nutzer das Dialogfeld schließt.
• properties: Eine Instanz von DialogProperties, die zusätzliche Möglichkeiten zur Anpassung bietet.

Achtung: Im Gegensatz zum Beispiel für AlertDialog im vorherigen Abschnitt müssen Sie Größe und Form von Dialog manuell angeben. Außerdem müssen Sie einen inneren Behälter angeben.

Einfaches Beispiel

Das folgende Beispiel zeigt eine einfache Implementierung des Dialog-Kompositionstyps. Beachten Sie, dass ein Card als sekundärer Container verwendet wird. Ohne die Card würde die Text-Komponente 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: Hinweis: Wenn das Dialogfeld geöffnet ist, werden die Hauptinhalte der App darunter abgedunkelt und ausgegraut:

Abbildung 3: Minimaler Dialog.

Erweitertes Beispiel

Im Folgenden finden Sie eine erweiterte Implementierung des Dialog-Kompositionstyps. In diesem Fall implementiert die Komponente manuell eine ähnliche Schnittstelle wie im obigen Beispiel für AlertDialog.

Vorsicht :Wenn Sie nur ein Dialogfeld mit zwei Schaltflächen wie in diesem Beispiel anzeigen möchten, sollten Sie AlertDialog und die praktischere API verwenden. Wenn Sie jedoch ein komplexeres Dialogfeld 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.

Weitere Informationen

• Material UI-Dokumente