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 findest du einige Beispiele dafür, wo du eine Karte verwenden kannst:

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

Ziel ist die Darstellung eines einzelnen Inhalts, der Card von anderen Containern unterscheidet. Zum Beispiel sorgt Scaffold für eine allgemeine Struktur für den 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 allgemeinere API bietet.

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

Einfache Implementierung

Card verhält sich in der Funktion „Compose“ ähnlich wie andere Container. Sie deklarieren den Inhalt, indem Sie darin andere zusammensetzbare Funktionen aufrufen. Sehen wir uns 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 Aussehen und Verhalten der Komponente anpassen können.

Einige wichtige Parameter, die zu beachten sind:

  • elevation: Der Komponente wird ein Schatten hinzugefügt, damit sie über dem Hintergrund erhöht wirkt.
  • colors: Mit dem Typ CardColors wird die Standardfarbe des Containers und aller untergeordneten Elemente festgelegt.
  • enabled: Wenn Sie false für diesen Parameter übergeben, wird die Karte als deaktiviert angezeigt und reagiert nicht auf Nutzereingaben.
  • onClick: Normalerweise akzeptiert Card keine Klickereignisse. Daher ist die primäre Überlastung, die einen onClick-Parameter definiert, zu beachten. Sie sollten diese Überlastung verwenden, wenn Ihre Implementierung von Card auf Drücken des Nutzers reagieren soll.

Das folgende Beispiel zeigt, wie Sie diese sowie andere 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 der Eigenschaft 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 wird mit der Farbe der Oberfläche aus dem Design „Material“ gefüllt.
Abbildung 2: Beispiel für eine ausgefüllte Karte.

Erhöhte Karte

Das folgende Snippet zeigt, wie eine Karte mit erhöhten Berechtigungen implementiert wird. Verwenden Sie die dedizierte zusammensetzbare Funktion ElevatedCard.

Mit der Eigenschaft elevation können Sie die Darstellung von Höhen und des daraus 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,
        )
    }
}
Card.kt

Diese Implementierung sieht so aus:

Über dem Hintergrund der App ist eine Karte mit einem Schatten zu sehen.
Abbildung 3: Beispiel für eine Karte mit Guthaben.

Karte mit Umriss

Im Folgenden finden Sie ein Beispiel für eine Karte mit Umriss. 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 mit einem schmalen schwarzen Rahmen ist umrandet.
Abbildung 4: Beispiel für eine umrissene Karte

Einschränkungen

Für Karten gibt es keine integrierten Aktionen zum Scrollen oder Schließen, können aber in zusammensetzbare Funktionen mit entsprechenden Funktionen eingebunden werden. Wenn Sie beispielsweise die Wischgeste zum Schließen auf einer Karte implementieren möchten, müssen Sie sie in die zusammensetzbare Funktion SwipeToDismiss einbinden. Zur Einbindung in das Scrollen können Sie Scrollmodifikatoren wie verticalScroll verwenden. Weitere Informationen findest du in der Dokumentation zum Scrollen.

Weitere Informationen