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

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 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 zusammensetzbare Funktionen 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, der sie über dem Hintergrund hervorhebt.
  • colors: Verwendet den Typ CardColors, um die Standardfarbe des Containers und aller untergeordneten Elemente festzulegen.
  • enabled: Wenn Sie für diesen Parameter false übergeben, wird die Karte als deaktiviert angezeigt und reagiert nicht auf Nutzereingaben.
  • onClick: Normalerweise akzeptiert eine Card keine Click-Events. 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 Karte mit erweiterten Rechten implementiert wird. Verwenden Sie die spezielle ElevatedCard-Komposition.

Mit der Eigenschaft elevation können Sie die Darstellung von Höhen und dem daraus 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 befindet sich im Schatten über dem Hintergrund der App.
Abbildung 3: Beispiel für eine erweiterte Karte.

Karte mit Umriss

Das folgende Beispiel zeigt eine umrissene Karte. 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

Für Karten gibt es keine grundsätzlichen Aktionen zum Scrollen oder Schließen, sie können jedoch in zusammensetzbare Funktionen integriert 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 Scroll-Dokumentation.

Weitere Informationen