Karty w Jetpack Compose Glimmer

Obsługiwane urządzenia z XR
Te wskazówki pomogą Ci tworzyć aplikacje na te typy urządzeń z XR.
Więcej informacji o typach urządzeń z XR →
Okulary z wyświetlaczem
Więcej informacji o typach urządzeń z XR →

W Glimmerze w Jetpack Compose komponent Card służy jako główny kontener powiązanych treści, tworząc wyraźną wizualną granicę dla łatwo przyswajalnych jednostek informacji. Karty są bardzo elastyczne i obsługują kombinacje treści głównych, opcjonalnych tytułów, podtytułów oraz ikon głównych i dodatkowych. Domyślnie karty wypełniają maksymalną dostępną szerokość, można je zaznaczać, a także klikać. Karty obsługują układ pionowy, w którym obraz nagłówka znajduje się na górze, a pod nim tytuł, podtytuł i treść.

Karty są oparte na systemie powierzchni Glimmer w Jetpack Compose, dzięki czemu dziedziczą właściwości fizyczne, takie jak efekty głębi, przycinanie i spójne wyróżnienia obramowania.

Rysunek 1. Przykład różnych stylów kart w Glimmerze w Jetpack Compose.

Anatomia i boksy

Karta Glimmer w Jetpack Compose składa się z kilku wyspecjalizowanych elementów, które umożliwiają dostosowanie jej treści i układu.

Boks Opis

Nagłówek

Górna część karty, przeznaczona na obraz.

Tytuł i podtytuł

Te pola tekstowe zawierają etykiety główne i dodatkowe karty. Tytuł znajduje się nad podtytułem.

Ikona główna

Opcjonalna ikona (zwykle Icon), która pojawia się na początku obszaru treści karty.

Ikona dodatkowa

Opcjonalna ikona, która pojawia się na końcu obszaru treści karty.

Główna część strony

Główna część karty zawierająca podstawowy Text lub treść.

Domyślne ustawienia karty

W przypadku kart obowiązują te ustawienia domyślne:

Przykład: podstawowa karta

Ten kod pokazuje minimalny kod potrzebny do utworzenia karty:

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

Przykład: karta z kilkoma boksami

Ten kod pokazuje, jak używać kilku boksów razem, aby utworzyć kartę:

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

Najważniejsze informacje o kodzie

  • Pokazuje, jak używać różnych elementów karty, takich jak title, subtitle i leadingIcon, aby dostosować treść i strukturę karty.
  • Używa przeciążenia Card z onClick, aby cała powierzchnia karty była interaktywna.

Karty działania

Jeśli chcesz dodać do karty przycisk polecenia, użyj ActionCard. Karty działania mają te same elementy co karty standardowe, a także dodatkowy parametr action, który określa dolny przycisk.

Rysunek 2. Przykład ActionCard w Glimmerze w Jetpack Compose.

Przykład: podstawowa karta działania

Ten kod pokazuje, jak utworzyć ActionCard:

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

Przykład: karta działania z ikoną

Ten kod pokazuje, jak utworzyć bardziej złożoną ActionCard z ikonami:

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