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 Hauptinhalten, optionalen Titeln, Untertiteln und vorangestellten oder nachgestellten Symbolen. Karten füllen standardmäßig die maximal verfügbare Breite aus, 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.

Aktion

Ein Slot für ein primäres interaktives Element wie ein Button.

Hauptinhalt

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

Standardwerte für Karten

Für Karten gelten die folgenden Standardwerte:

Beispiel: Einfache Karte

Mit dem folgenden Code wird eine einfache Karte erstellt:

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}

Beispiel: Komplexe Karte mit mehreren Slots

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

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}

Wichtige Informationen zum Code

  • Zeigt, wie Sie verschiedene Kartenelemente wie header, title, leadingIcon und action verwenden, um Inhalt und Struktur der Karte anzupassen.
  • Verwendet die Standardüberladung von Card mit einer Aktion, da nur die Karte (oder ihre interne Aktion) fokussierbar sein muss. Wenn Sie die gesamte Kartenoberfläche interaktiv gestalten möchten, verwenden Sie stattdessen die Card Überladung mit onClick.
  • Diese Karte verwendet einen Aktionsslot. Daher ist die Kartenoberfläche nicht fokussierbar und der Fokus wird stattdessen auf den Aktionsbutton gerichtet.