Karty w Jetpack Compose Glimmer

Odpowiednie urządzenia XR

Te wskazówki pomogą Ci tworzyć treści na te urządzenia XR.

Więcej informacji o typach urządzeń XR →

Więcej informacji o typach urządzeń XR →

W Jetpack Compose Glimmer komponent Card służy do grupowania i wyświetlania powiązanych informacji w jednej jednostce. Karty są bardzo elastyczne i mogą zawierać kombinacje głównej treści, opcjonalnych tytułów i podtytułów oraz ikon na początku lub na końcu. Karty domyślnie wypełniają całą szerokość wyświetlacza okularów AI, można je zaznaczać i klikać.

Anatomia karty i gniazda

Karta Glimmer w Jetpack Compose składa się z kilku specjalistycznych elementów, dzięki czemu możesz dostosowywać jej zawartość i układ.

• Nagłówek: górna sekcja karty przeznaczona na obraz.

• Tytuł i podtytuł: te pola tekstowe zawierają główne i dodatkowe etykiety karty.

• Ikona wiodąca: opcjonalna ikona, która pojawia się na początku obszaru treści karty.

• Ikona na końcu: opcjonalna ikona, która pojawia się na końcu obszaru treści karty.

• Działanie: miejsce na główny element interaktywny, np. przycisk. Dzięki temu użytkownicy mogą wykonywać działania bezpośrednio z karty. Gniazdo jest dostępne w osobnym przeciążeniu komponentu kompozycyjnego Card.

• Treść główna: główna część karty, w której umieszczasz tekst podstawowy lub inne treści.

Podstawowy przykład: tworzenie podstawowej karty

Możesz utworzyć bardzo prostą kartę przy użyciu niewielkiej ilości kodu:

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

Szczegółowy przykład: wyświetlanie złożonej karty

Poniższy kod pokazuje, jak używać wielu slotów razem do tworzenia karty. Pokazuje też, jak sparować Card z TitleChip.

@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")
        }
    }
}

Najważniejsze informacje o kodzie

• Pokazuje, jak używać różnych elementów karty, takich jak header, title, subtitle, leadingIcon i action, aby dostosować treść i strukturę karty.
• Pokazuje przykład umieszczania elementu TitleChip i używania elementu Spacer.