Infokarte

Die zusammensetzbare Funktion Card dient als Material Design-Container für Ihre UI. Infokarten enthalten in der Regel einen zusammenhängenden Inhalt. Im Folgenden finden Sie einige Beispiele dafür, wo Sie eine Karte verwenden können:

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

Der Fokus liegt auf der Darstellung eines einzelnen Inhalts, der Card von anderen Containern unterscheidet. Scaffold bietet beispielsweise eine allgemeine Struktur für einen gesamten 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 generischere API bietet.

Eine Karte mit erweiterten Suchergebnissen mit Text und Symbolen.
Abbildung 1. Ein Beispiel für eine Karte mit Text und Symbolen.

Einfache Implementierung

Card verhält sich ähnlich wie andere Container in Compose. Sie deklarieren den Inhalt, indem Sie andere zusammensetzbare Funktionen darin aufrufen. Sehen wir uns im folgenden minimalen Beispiel an, wie Card einen Aufruf von Text enthält:

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

Erweiterte Implementierungen

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

Folgende wichtige Parameter sind zu beachten:

  • elevation: Fügt der Komponente einen Schatten hinzu, sodass sie über dem Hintergrund hervorgehoben erscheint.
  • colors: Verwendet den Typ CardColors, um die Standardfarbe des Containers und aller untergeordneten Elemente festzulegen.
  • enabled: Wenn Sie false für diesen Parameter übergeben, wird die Karte als deaktiviert angezeigt und reagiert nicht auf Nutzereingaben.
  • onClick: Normalerweise akzeptiert eine Card keine Click-Events. Die primäre Überlastung ist daher diejenige, die einen onClick-Parameter definiert. Sie sollten diese Überlastung verwenden, wenn Ihre Implementierung von Card auf das Drücken des Nutzers reagieren soll.

Das folgende Beispiel zeigt, wie Sie diese Parameter sowie weitere gängige Parameter wie shape und modifier verwenden können.

Ausgefüllte Karte

Das folgende Beispiel zeigt, wie Sie eine ausgefüllte Karte implementieren können.

Entscheidend ist hier die Verwendung des Attributs colors, um die Füllfarbe 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 Material Design ausgefü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 dedizierte zusammensetzbare Funktion ElevatedCard.

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 Karte mit erhöhten Rechten.

Karte mit Umriss

Das folgende Beispiel zeigt eine umrissene Karte. Verwenden Sie die dedizierte zusammensetzbare Funktion OutlinedCard.

@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 ist mit einem dünnen schwarzen Rahmen umrandet.
Abbildung 4: Beispiel für eine umrissene Karte.

Einschrä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 du beispielsweise auf einer Karte die Wischgesten zum Schließen implementieren möchtest, integriere sie in die zusammensetzbare Funktion SwipeToDismiss. Zur Einbindung in das Scrollen können Sie Scrollmodifikatoren wie verticalScroll verwenden. Weitere Informationen finden Sie in der Scroll-Dokumentation.

Zusätzliche Ressourcen