Karten in Jetpack Compose Glimmer

Anwendbare XR‑Geräte
Dieser Leitfaden hilft Ihnen dabei, Erlebnisse für diese Arten von XR-Geräten zu entwickeln.
Informationen zu XR-Gerätetypen →
AI Glasses
Informationen zu XR-Gerätetypen →

In Jetpack Compose Glimmer ist die Komponente Card dafür vorgesehen, zusammengehörige Informationen in einer einzelnen Einheit zu gruppieren und darzustellen. Karten sind sehr anpassungsfähig und unterstützen Kombinationen aus Hauptinhalten, optionalen Titeln und Untertiteln sowie führenden oder nachgestellten Symbolen. Karten füllen standardmäßig die maximale Breite des Displays der KI-Brille aus, sind fokussierbar und können auch anklickbar gemacht werden.

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

Aufbau und Slots von Karten

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

  • Kopfzeile: Der obere Bereich der Karte, in dem ein Bild platziert werden kann.

  • Titel und Untertitel: Diese Textfelder enthalten die primären und sekundären Labels für die Karte.

  • Leading Icon (Führendes Symbol): Ein optionales Symbol, das am Anfang des Inhaltsbereichs der Karte angezeigt wird.

  • Schluss-Symbol: Ein optionales Symbol, das am Ende des Inhaltsbereichs der Karte angezeigt wird.

  • Aktion: Ein Slot für ein primäres interaktives Element, z. B. eine Schaltfläche. So können Nutzer eine Aktion direkt über die Karte ausführen. Der Slot ist in einer separaten Überladung der Card-Composable verfügbar.

  • Hauptinhalt: Der Hauptteil der Karte, in dem Sie den primären Text oder andere Inhalte platzieren.

Einfaches Beispiel: Einfache Karte erstellen

Sie können mit sehr wenig Code eine einfache Karte erstellen:

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

Detailliertes Beispiel: Komplexe Karte anzeigen

Im folgenden Code wird gezeigt, wie Sie mehrere Slots zusammen verwenden, um eine Karte zu erstellen. Außerdem wird gezeigt, wie Sie ein Card mit einem TitleChip kombinieren.

@Composable
fun SampleGlimmerCard() {
    val myHeaderImage = painterResource(id = R.drawable.header_image)
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
        Card(
            action = {
                Button(onClick = {}) {
                    Text("Action Button")
                }
            },
            header = {
                Image(
                    painter = myHeaderImage,
                    contentDescription = "Header image for the card",
                    contentScale = ContentScale.FillWidth
                )
            },
            title = { Text("Card Title") },
            subtitle = { Text("Card Subtitle") },
            leadingIcon = { FavoriteIcon, "Localized description" },
            trailingIcon = { FavoriteIcon, "Localized description" }
        ) {
            Text("A Jetpack Compose Glimmer Card using all available slots")
        }
    }
}

Wichtige Punkte zum Code

  • Hier wird gezeigt, wie Sie verschiedene Kartenelemente wie header, title, subtitle, leadingIcon und action verwenden, um den Inhalt und die Struktur der Karte anzupassen.
  • Hier sehen Sie ein Beispiel dafür, wie Sie ein TitleChip platzieren und ein Spacer verwenden.