Dialogfeld

Die Komponente Dialog zeigt Pop-up-Nachrichten an oder fordert Nutzereingaben auf einer Ebene über dem Hauptinhalt der App an. Sie unterbricht die Nutzeroberfläche, 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
  • Eine Liste von Optionen für die Nutzerauswahl präsentieren, z. B. die Auswahl eines Landes bei der Profileinrichtung.
Ein Dialogfeld mit Text und Symbolen.
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, die oben im Dialogfeld angezeigt wird.
  • onDismissRequest: Die Funktion, die aufgerufen wird, wenn der Nutzer das Dialogfeld schließt. indem Sie außerhalb davon tippen.
  • 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, schließt das Dialogfeld und ein weiteres, das die Anfrage bestätigt.

@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 Argumente auf diese Weise an das untergeordnete Composeable ü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:

Ein Dialogfeld zum Öffnen von Benachrichtigungen mit einer Schaltfläche zum Schließen und Bestätigen.
Abbildung 2: Ein Benachrichtigungsdialogfeld mit Schaltflächen.

Dialog zusammensetzbar

Dialog ist ein einfaches Composeable, das kein Styling und keine vordefinierten Slots für Inhalte bietet. Es handelt sich um einen relativ einfachen Container, sollten Sie einen Container wie Card verwenden. 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ätzliche Möglichkeiten zur Anpassung bietet.

Einfaches Beispiel

Das folgende Beispiel zeigt eine einfache Implementierung des Dialog-Kompositionstyps. Hinweis dass er Card als sekundären Container verwendet. 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: Wenn das Dialogfeld geöffnet ist, Der Inhalt der App darunter wird abgedunkelt und ausgegraut dargestellt:

Ein Dialogfeld, das nur ein Label enthält.
Abbildung 3: Minimaler Dialog.

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 obigen Beispiel für AlertDialog.

@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:

Ein Dialogfeld mit einem Foto von Mount Feathertop, Victoria. Unter dem Bild befinden sich die Schaltflächen „Schließen“ und „Bestätigen“.
Abbildung 4: Ein Dialogfeld mit einem Bild.

Weitere Informationen