Infokarte

Das Card zusammensetzbare Element dient als Material Design-Container für Ihre Benutzeroberfläche. Karten präsentieren in der Regel einen einzelnen zusammenhängenden Inhalt. In den folgenden Beispielen sehen Sie, wo Sie eine Karte verwenden können:

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

Der Fokus auf die Darstellung eines einzelnen Inhalts unterscheidet Card von anderen Containern. Scaffold bietet beispielsweise eine allgemeine Struktur für einen ganzen 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 ähnlich wie andere Container in Compose. Sie deklarieren den Inhalt, indem Sie andere zusammensetzbare Elemente darin aufrufen. Im folgenden Minimalbeispiel enthält Card beispielsweise einen Aufruf von Text:

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

Erweiterte Implementierungen

Die API-Definition von Card finden Sie in der reference. Dort sind mehrere Parameter definiert, mit denen Sie das Aussehen und Verhalten der Komponente anpassen können.

Einige wichtige Parameter sind:

• elevation: Fügt der Komponente einen Schatten hinzu, sodass sie über dem Hintergrund zu schweben scheint.
• colors: Mit dem Typ CardColors wird die Standardfarbe des Containers und aller untergeordneten Elemente festgelegt.
• enabled: Wenn Sie für diesen Parameter false übergeben, wird die Karte als deaktiviert angezeigt und reagiert nicht auf Nutzereingaben.
• onClick: Normalerweise akzeptiert Card keine Klickereignisse. Die wichtigste Überladung ist daher die, die einen onClick-Parameter definiert. Verwenden Sie diese Überladung, wenn Ihre Implementierung von Card auf Tippen von Nutzern reagieren soll.

Im folgenden Beispiel sehen Sie, wie Sie diese Parameter sowie andere gängige Parameter wie shape und modifier verwenden können.

Ausgefüllte Karte

Im Folgenden sehen Sie ein Beispiel für die Implementierung einer Karte mit Füllung.

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

Karte mit Erhebung

Das folgende Snippet zeigt, wie Sie eine Karte mit Erhebung implementieren. Verwenden Sie das spezielle ElevatedCard zusammensetzbare Element.

Mit der Eigenschaft elevation können Sie das Aussehen der Erhebung und den resultierenden Schatten 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:

Karte mit Umriss

Im Folgenden sehen Sie ein Beispiel für eine Karte mit Umriss. Verwenden Sie das spezielle OutlinedCard zusammensetzbare Element.

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

Beschränkungen

Karten haben keine Scroll- oder Schließaktionen, können aber in zusammensetzbare Elemente integriert werden, die diese Funktionen bieten. Wenn Sie beispielsweise eine Karte durch Wischen schließen möchten , integrieren Sie sie in das SwipeToDismiss zusammensetzbare Element. Für die Integration mit Scrollen verwenden Sie Scroll-Modifikatoren wie verticalScroll. Weitere Informationen finden Sie in der Scroll Dokumentation.

Zusätzliche Ressourcen

• Material UI-Dokumentation