Karte als Container erstellen

Das Card-Element dient als Material Design-Container für Ihre Benutzeroberfläche. Karten enthalten einen einzelnen zusammenhängenden Inhalt, z. B.:

  • Ein Produkt in einer Shopping-App.
  • Eine Nachrichtenmeldung in einer Nachrichten-App.
  • Eine Nachricht in einer Kommunikations-App

Durch den Fokus auf die Darstellung eines einzelnen Inhalts unterscheidet sich Card von anderen Containern. Scaffold bietet beispielsweise die allgemeine Struktur für einen ganzen Bildschirm. Eine Karte ist ein kleineres UI-Element in einem größeren Layout, während eine Layoutkomponente wie Column oder Row eine einfachere und allgemeinere API bietet.

In diesem Thema erfahren Sie, wie Sie vier Arten von Karten implementieren:

Versionskompatibilität

Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.

Abhängigkeiten

Einfache Karte erstellen

Card verhält sich weitgehend wie andere Container in Compose. Sie deklarieren den Inhalt, indem Sie andere composables darin aufrufen. Im folgenden Minimalbeispiel enthält Card beispielsweise einen Aufruf von Text:

Ausgefüllte Karte erstellen

Der Schlüssel dabei ist die Verwendung der Eigenschaft colors, um die Füllungsfarbe zu ändern:

Ergebnisse

Eine Karte ist mit der Farbe der Oberflächenvariante aus dem Materialdesign gefüllt.
Abbildung 1 Beispiel für eine ausgefüllte Karte.

Erweiterte Karte erstellen

Im folgenden Snippet wird gezeigt, wie eine erweiterte Karte implementiert wird. Verwenden Sie die spezielle ElevatedCard-Komposition.

Mit der Property elevation können Sie die Darstellung der Höhe und den resultierenden Schatten steuern.

Ergebnisse

Eine Karte ragt mit einem Schatten über den Hintergrund der App hinaus.
Abbildung 2. Beispiel für eine erweiterte Karte.

Karte mit Umriss erstellen

Im Folgenden sehen Sie ein Beispiel für eine Karte mit Umriss. Verwenden Sie die spezielle OutlinedCard-Komponente.

Ergebnisse

Eine Karte hat einen dünnen schwarzen Rahmen.
Abbildung 3 Beispiel für eine Karte mit Umriss.

Wichtige Fakten

Die API-Definition von Card finden Sie in der Referenz. Es werden mehrere Parameter definiert, mit denen Sie das Aussehen und Verhalten der Komponente anpassen können.

Zu den wichtigsten Parametern gehören:

  • elevation: Fügen Sie der Komponente einen Schatten hinzu, der sie über dem Hintergrund hervorhebt.
  • colors: Mit dem Typ CardColors wird die Standardfarbe sowohl des Containers als auch aller untergeordneten Elemente festgelegt.
  • enabled: Wenn Sie für diesen Parameter false übergeben, wird die Karte als deaktiviert angezeigt und reagiert nicht auf Nutzereingaben.
  • onClick: Normalerweise werden für Card keine Klickereignisse akzeptiert. Daher sollten Sie sich die primäre Überladung merken, bei der ein onClick-Parameter definiert wird. Verwenden Sie diese Überladung, wenn Ihre Implementierung von Card auf Klicks von Nutzern reagieren soll.

Karten haben keine integrierten Scroll- oder Schließaktionen, können aber in Kompositionen eingebunden werden, die diese Funktionen bieten. Wenn Sie beispielsweise die Funktion „Wischen, um zu schließen“ auf einer Karte implementieren möchten, integrieren Sie sie in das SwipeToDismiss-Komposit. Wenn du die Funktion mit dem Scrollen verknüpfen möchtest, verwende Scroll-Modifikatoren wie verticalScroll. Weitere Informationen finden Sie in der Scroll-Dokumentation.

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:

Hier erfahren Sie, wie Sie mit kombinierbaren Funktionen ganz einfach ansprechende UI-Komponenten auf der Grundlage des Material Design-Designsystems erstellen können.
Sammlung von Kurzanleitungen

Hast du Fragen oder Feedback?

Auf unserer Seite mit häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können sich auch gern an uns wenden.
Zu den FAQs Feedback geben