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.
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 TypCardColors
wird die Standardfarbe des Containers und aller untergeordneten Elemente festgelegt.enabled
: Wenn Siefalse
für diesen Parameter übergeben, wird die Karte als deaktiviert angezeigt und reagiert nicht auf Nutzereingaben.onClick
: Normalerweise akzeptiertCard
keine Klickereignisse. Daher ist die primäre Überlastung, die einenonClick
-Parameter definiert, zu beachten. Sie sollten diese Überlastung verwenden, wenn Ihre Implementierung vonCard
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, ) } }
Diese Implementierung sieht so aus:
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, ) } }
Diese Implementierung sieht so aus:
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, ) } }
Diese Implementierung sieht so aus:
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.