Karten in Jetpack Compose Glimmer

XR‑Geräte, für die der Leitfaden gilt
Dieser Leitfaden hilft Ihnen dabei, Erlebnisse für die folgenden Arten von XR-Geräten zu entwickeln.
Informationen zu XR‑Gerätetypen
Displaybrillen
Informationen zu XR‑Gerätetypen

In Jetpack Compose Glimmer dient die Card Komponente als primärer Container für zugehörige Inhalte und schafft eine klare visuelle Abgrenzung für verständliche Informationseinheiten. Karten sind sehr anpassungsfähig und unterstützen Kombinationen aus Hauptinhalt, optionalen Titeln, Untertiteln und vorangestellten oder nachgestellten Symbolen. Karten füllen standardmäßig die maximal verfügbare Breite, sind fokussierbar und können auch klickbar gemacht werden. Karten unterstützen eine vertikale Anordnung, bei der das Headerbild oben steht, gefolgt von Titel, Untertitel und Hauptinhalt.

Karten basieren auf dem Jetpack Compose Glimmer Oberflächensystem und übernehmen daher physikalische Eigenschaften wie Tiefeneffekte, Clipping und konsistente Rahmen hervorhebungen.

Abbildung 1. Ein Beispiel für einige verschiedene Kartenstile in Jetpack Compose Glimmer.

Anatomie und Slots

Eine Jetpack Compose Glimmer-Karte besteht aus mehreren speziellen Elementen, mit denen Sie Inhalt und Layout anpassen können.

Slot Beschreibung

Header

Der obere Bereich der Karte, der ein Bild enthalten soll.

Titel und Untertitel

Diese Textfelder enthalten die Haupt- und Sekundärlabels für die Karte. Der Titel wird über dem Untertitel platziert.

Vorangestelltes Symbol

Ein optionales Symbol (in der Regel ein Icon), das am Anfang des Inhaltsbereichs der Karte angezeigt wird.

Nachgestelltes Symbol

Ein optionales Symbol, das am Ende des Inhaltsbereichs der Karte angezeigt wird.

Hauptinhalt

Der Hauptteil der Karte für primären Text oder Inhalt.

Standardeinstellungen für Karten

Für Karten gelten die folgenden Standardeinstellungen:

Beispiel: Einfache Karte

Der folgende Code zeigt den minimalen Code, der zum Erstellen einer Karte erforderlich ist:

Card { Text("This is a card") }

Beispiel: Karte mit mehreren Slots

Der folgende Code zeigt, wie Sie mehrere Slots zusammen verwenden, um eine Karte zu erstellen:

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}

Wichtige Informationen zum Code

  • Hier wird gezeigt, wie Sie verschiedene Kartenelemente wie title, subtitle und leadingIcon verwenden, um Inhalt und Struktur der Karte anzupassen.
  • Verwendet die Card-Überladung mit onClick, um die gesamte Kartenoberfläche interaktiv zu gestalten.

Aktionskarten

Wenn Sie eine Aktionsschaltfläche in eine Karte einfügen möchten, verwenden Sie eine ActionCard. Aktionskarten haben dieselben Elemente wie Standardkarten und enthalten außerdem einen zusätzlichen action-Parameter, der die untere Schaltfläche definiert.

Abbildung 2. Ein Beispiel für eine ActionCard in Jetpack Compose Glimmer.

Beispiel: Einfache Aktionskarte

Dieser Code zeigt, wie Sie eine ActionCard erstellen:

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}

Beispiel: Aktionskarte mit Symbol

Dieser Code zeigt, wie Sie eine komplexere ActionCard mit Symbolen erstellen:

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}