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.
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 TypCardColors
, um die Standardfarbe beider Elemente festzulegen den Container und alle untergeordneten Elemente.enabled
: Wenn Siefalse
für diesen Parameter übergeben, wird die Karte so angezeigt: deaktiviert und reagiert nicht auf Nutzereingaben.onClick
: Normalerweise akzeptiert eineCard
keine Click-Events. Daher die primäre Überlastung ist,onClick
-Parameter. Sie sollten diese Überlastung nutzen, Implementierung vonCard
, 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, ) } }
Diese Implementierung sieht so aus:
<ph type="x-smartling-placeholder">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, ) } }
Diese Implementierung sieht so aus:
<ph type="x-smartling-placeholder">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, ) } }
Diese Implementierung sieht so aus:
<ph type="x-smartling-placeholder">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.