Infokarte

Die zusammensetzbare Funktion Card dient als Material Design-Container für Ihre UI. Infokarten enthalten in der Regel einen zusammenhängenden Inhalt. Folgendes sind Beispiele für die Verwendung einer Karte:

  • 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 aus anderen Containern. Scaffold bietet beispielsweise eine allgemeine Struktur auf einen ganzen Bildschirm übertragen. 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.

<ph type="x-smartling-placeholder">
</ph> 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 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. Sie definiert mehrere Parameter, mit denen Sie das Aussehen und Verhalten der Komponente.

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 die primäre Überlastung ist, onClick-Parameter. Sie sollten diese Überlastung nutzen, Implementierung von Card, um auf das Drücken des Nutzers zu reagieren.

Das folgende Beispiel zeigt, wie Sie diese Parameter sowie als weitere gängige Parameter wie shape und modifier.

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:

<ph type="x-smartling-placeholder">
</ph> 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:

<ph type="x-smartling-placeholder">
</ph> 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 OutlinedCard zusammensetzbar.

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

<ph type="x-smartling-placeholder">
</ph> Eine Karte ist mit einem dünnen schwarzen Rahmen umrandet.
Abbildung 4: Beispiel für eine umrissene Karte.

Beschränkungen

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