Karte

Die zusammensetzbare Funktion Card fungiert als Material Design-Container für Ihre UI. Karten enthalten in der Regel einen einzelnen zusammenhängenden Inhalt. In den folgenden Beispielen sehen Sie, wo Sie eine Karte verwenden können:

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

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

Eine hervorgehobene Karte mit Text und Symbolen.
Abbildung 1. 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 Sie sich beispielsweise an, wie Card im folgenden Minimalbeispiel 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. Sie definiert mehrere Parameter, mit denen Sie das Erscheinungsbild und das Verhalten der Komponente anpassen können.

Hier sind einige wichtige Parameter:

  • elevation: Fügt der Komponente einen Schatten hinzu, sodass sie über dem Hintergrund zu schweben scheint.
  • 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 ein Card keine Click-Events. Die wichtigste Überladung, die Sie beachten sollten, ist die, die einen onClick-Parameter definiert. Verwende diese Überladung, wenn deine Implementierung von Card auf das Drücken durch den Nutzer 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ü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,
        )
    }
}

Diese Implementierung sieht so aus:

Eine Karte wird mit der Oberflächenvariante des Material-Designs gefüllt.
Abbildung 2: Beispiel für eine ausgefüllte Karte.

Erhöhte Karte

Das folgende Snippet zeigt, wie eine Karte mit Schatten implementiert wird. Verwenden Sie die dedizierte kombinierbare Funktion ElevatedCard.

Mit der Property elevation können Sie die Darstellung der Erhöhung und des resultierenden Schattens 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,
        )
    }
}

Diese Implementierung sieht so aus:

Eine Karte wird mit einem Schatten über dem Hintergrund der App angezeigt.
Abbildung 3: Beispiel für eine hervorgehobene Karte.

Karte mit Umriss

Das folgende Beispiel zeigt eine Karte mit Umriss. Verwenden Sie das dedizierte OutlinedCard-Composable.

@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,
        )
    }
}

Diese Implementierung sieht so aus:

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

Einschränkungen

Karten haben keine integrierten Scroll- oder Schließaktionen, können aber in Composables eingebunden werden, die diese Funktionen bieten. Wenn du beispielsweise die Funktion „Wischen zum Schließen“ auf einer Karte implementieren möchtest, integriere sie in das SwipeToDismiss-Composable. Wenn Sie das Scrollen einbinden möchten, verwenden Sie Scroll-Modifikatoren wie verticalScroll. Weitere Informationen finden Sie in der Dokumentation zum Scrollen.

Zusätzliche Ressourcen