Infokarte

Das Card-Element dient als Material Design-Container für Ihre Benutzeroberfläche. Karten enthalten in der Regel einen einzelnen zusammenhängenden Inhalt. Im Folgenden finden Sie einige Beispiele für Anwendungsfälle:

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

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

Eine erhöhte Karte mit Text und Symbolen.
Abbildung 1: Beispiel für eine Karte mit Text und Symbolen.

Einfache Implementierung

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:

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

Erweiterte Implementierungen

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.

Einige wichtige Parameter sind:

  • elevation: Fügen Sie der Komponente einen Schatten hinzu, wodurch sie über dem Hintergrund hervorgehoben wird.
  • 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. Sie sollten diese Überladung verwenden, wenn Ihre Implementierung von Card auf Tastendrücke des Nutzers reagieren soll.

Im folgenden Beispiel wird gezeigt, wie Sie diese Parameter sowie andere gängige Parameter wie shape und modifier verwenden können.

Ausgefüllte Karte

Im Folgenden finden Sie ein Beispiel für die Implementierung einer ausgefüllten Karte.

Der Schlüssel ist hier die Verwendung des Attributs colors, um die Füllungsfarbe zu ändern.

@Composable
fun FilledCardExample() {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant,
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Filled",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

Diese Implementierung sieht so aus:

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

Erhöhte Karte

Das folgende Snippet zeigt, 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.

@Composable
fun ElevatedCardExample() {
    ElevatedCard(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 6.dp
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Elevated",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

Diese Implementierung sieht so aus:

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

Umrandete Karte

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

@Composable
fun OutlinedCardExample() {
    OutlinedCard(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface,
        ),
        border = BorderStroke(1.dp, Color.Black),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Outlined",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

Diese Implementierung sieht so aus:

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

Beschränkungen

Karten haben keine integrierten Scroll- oder Schließaktionen, können aber in Kompositionen eingebunden werden, die diese Funktionen bieten. Wenn Sie beispielsweise die Wischgeste zum Schließen 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 Dokumentation zum Scrollen.

Weitere Informationen