Pop-up-Nachrichten oder Aufforderungen zur Nutzereingabe anzeigen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Die Komponente Dialog zeigt Pop-up-Nachrichten an oder fordert Nutzereingaben in einer Ebene über dem Hauptinhalt 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 von Nutzeraktionen, 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.
In diesem Thema werden die folgenden Implementierungen beschrieben:
Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.
Abhängigkeiten
Dialogfeld „Benachrichtigung erstellen“
Das AlertDialog-Komposit bietet eine praktische API zum Erstellen eines Dialogfelds im Material Design-Design. Im folgenden Beispiel werden zwei Schaltflächen in einem Benachrichtigungsdialogfeld implementiert, eine zum Schließen des Dialogfelds und eine zum Bestätigen der Anfrage:
Diese Implementierung setzt ein übergeordnetes Composeable voraus, das Argumente auf diese Weise an das untergeordnete Composeable übergibt:
Ergebnisse
Abbildung 1: Ein Warndialogfeld mit Schaltflächen.
Wichtige Fakten
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.
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().
Wenn Ihr Dialogfeld eine komplexere Reihe von Schaltflächen erfordert, können Sie die Dialog-Komponente verwenden und sie freier gestalten.
Dialogfeld erstellen
Dialog ist ein einfaches Composeable, das kein Styling und keine vordefinierten Slots für Inhalte bietet. Es ist ein 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.
Einfachen Dialog erstellen
Das folgende Beispiel ist eine grundlegende 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.
Ergebnis
Wenn das Dialogfeld geöffnet ist, werden die Hauptinhalte der App darunter abgedunkelt und ausgegraut:
Abbildung 2: Minimaler Dialog.
Erweitertes Dialogfeld erstellen
Im Folgenden finden Sie eine erweiterte Implementierung des Dialog-Kompositionstyps. In diesem Fall implementiert die Komponente manuell eine ähnliche Benutzeroberfläche wie im vorherigen AlertDialog-Beispiel.
Ergebnis
Abbildung 3: Ein Dialogfeld mit einem Bild.
Sammlungen, die diesen Leitfaden enthalten
Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:
Anzeigetext
Text ist ein zentrales Element jeder Benutzeroberfläche. Hier erfahren Sie, wie Sie Text in Ihrer App präsentieren können, um die Nutzerfreundlichkeit zu verbessern.
Hier erfahren Sie, wie Sie mit kombinierbaren Funktionen ganz einfach ansprechende UI-Komponenten auf der Grundlage des Material Design-Designsystems erstellen können.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-02-06 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-02-06 (UTC)."],[],[],null,["\u003cbr /\u003e\n\nThe [`Dialog`](/reference/kotlin/androidx/compose/ui/window/package-summary#Dialog(kotlin.Function0,androidx.compose.ui.window.DialogProperties,kotlin.Function0)) component displays pop-up messages or requests user input on a\nlayer above the main app content. It creates an interruptive UI experience to\ncapture user attention.\n\nAmong the use cases for a dialog are the following:\n\n- Confirming user action, such as when deleting a file.\n- Requesting user input, such as in a to-do list app.\n- Presenting a list of options for user selection, like choosing a country in a profile setup.\n\nThis topic provides the following implementations:\n\n- [Alert](#alert)\n- [Basic dialog](#basic)\n- [Advanced dialog](#advanced)\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nCreate an Alert dialog\n\nThe [`AlertDialog`](/reference/kotlin/androidx/compose/material3/package-summary#AlertDialog(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.window.DialogProperties)) composable provides a convenient API for creating a\nMaterial Design themed dialog. The following example implements two buttons in\nan alert dialog, one that dismisses the dialog, and another that confirms its\nrequest:\n\nThis implementation implies a parent composable that passes arguments to the\nchild composable in this way:\n\nResults **Figure 1.** An alert dialog with buttons.\n\nKey points\n\n`AlertDialog` has specific parameters for handling particular elements of the\ndialog. Among them are the following:\n\n- `title`: The text that appears along the top of the dialog.\n- `text`: The text that appears centered within the dialog.\n- `icon`: The graphic that appears at the top of the dialog.\n- `onDismissRequest`: The function called when the user dismisses the dialog, such as by tapping outside of it.\n- `dismissButton`: A composable that serves as the dismiss button.\n- `confirmButton`: A composable that serves as the confirm button.\n\n- When the user clicks either of the buttons, the dialog closes. When the user\n clicks confirm, it calls a function that also handles the confirmation. In\n this example, those functions are `onDismissRequest()` and\n `onConfirmRequest()`.\n\n In cases where your dialog requires a more complex set of buttons, you may\n benefit from using the `Dialog` composable and populating it in a more\n freeform manner.\n\nCreate a dialog\n\n[`Dialog`](/reference/kotlin/androidx/compose/ui/window/package-summary#Dialog(kotlin.Function0,androidx.compose.ui.window.DialogProperties,kotlin.Function0)) is a basic composable that doesn't provide any styling or\npredefined slots for content. It is a straightforward container that you should\npopulate with a container such as `Card`. The following are some of the key\nparameters of a dialog:\n\n- **`onDismissRequest`**: The lambda called when the user closes the dialog.\n- **`properties`** : An instance of [`DialogProperties`](/reference/kotlin/androidx/compose/ui/window/DialogProperties) that provides some additional scope for customization.\n\n| **Caution:** You must manually specify the size and shape of `Dialog`. You also must provide an inner container.\n\nCreate a basic dialog\n\nThe following example is a basic implementation of the `Dialog` composable. Note\nthat it uses a `Card` as the secondary container. Without the `Card`, the `Text`\ncomponent would appear alone above the main app content.\n\nResult\n\nNote that when the dialog is open, the main app content beneath it appears\ndarkened and grayed out:\n**Figure 2.** Minimal dialog.\n\nCreate an advanced dialog\n\nThe following is a more advanced implemented of the `Dialog` composable. In this\ncase, the component manually implements a similar interface to the preceding\n`AlertDialog` example.\n| **Caution:** If you only need to display a two-button dialog as in this example, you should use `AlertDialog` and its more convenient API. However, if you want to create a more complex dialog, perhaps with forms and multiple buttons, you should use `Dialog` with custom content, as in the following example.\n\nResult **Figure 3.** A dialog that includes an image.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay text \nText is a central piece of any UI. Find out different ways you can present text in your app to provide a delightful user experience. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-text) \n\nRequest user input \nLearn how to implement ways for users to interact with your app by entering text and using other means of input. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/request-user-input) \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
