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 Beispiele für die Verwendung einer Karte:

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

Der Fokus liegt auf der Darstellung eines einzelnen Inhalts, der Card aus anderen Containern. Scaffold bietet beispielsweise die allgemeine Struktur für einen ganzen Bildschirm. Die Karte ist in der Regel ein kleineres UI-Element in einem größeren Layout, während eine Layoutkomponente wie Column oder Row ein einfacheres und einer generischen API.

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 weitgehend wie andere Container in Compose. Sie deklarieren deren Inhalt durch und rufen andere zusammensetzbare Funktionen auf. Sehen wir uns zum Beispiel an, wie Card einen Aufruf von Text im folgenden Minimalbeispiel:

@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.

Folgende wichtige Parameter sind zu beachten:

  • elevation: Fügt der Komponente einen Schatten hinzu, der sie erscheinen lässt. über dem Hintergrund.
  • colors: Verwendet den Typ CardColors, um die Standardfarbe beider Elemente festzulegen den Container und alle untergeordneten Elemente.
  • enabled: Wenn Sie false für diesen Parameter übergeben, wird die Karte so angezeigt: deaktiviert 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 Überlastung nutzen, Implementierung von Card, um auf das Drücken des Nutzers zu reagieren.

Im folgenden Beispiel wird gezeigt, wie Sie diese Parameter 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 das ausgefüllte Feld Farbe.

@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 Methode dedizierten zusammensetzbaren ElevatedCard-Element.

Mit der Eigenschaft elevation können Sie die Darstellung von Höhen- und den sich ergebenden Schatten.

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

Beschränkungen

Karten haben keine integrierten Scroll- oder Schließaktionen, können aber in Kompositionen eingebunden werden, die diese Funktionen bieten. Um beispielsweise die Wischgeste zum Schließen können Sie sie in die zusammensetzbare Funktion SwipeToDismiss einbinden. So integrieren Sie mit Scroll-Modifikatoren wie verticalScroll. Siehe Scroll- in der Dokumentation.

Weitere Informationen