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 Jetpack Compose Glimmer komponent Card służy jako główny kontener powiązanych treści, tworząc wyraźną granicę wizualną 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 końcowych. 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 następnie tytuł, podtytuł i treść.

Karty są oparte na systemie powierzchni Jetpack Compose Glimmer surface system, 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 Jetpack Compose Glimmer.

Anatomia i boksy

Karta Jetpack Compose Glimmer jest zbudowana 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 końcowa

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

Działanie

Boks na główny element interaktywny, np. Button.

Główna część strony

Główna część karty na podstawowy Text lub treść.

Domyślne ustawienia karty

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

Przykład: podstawowa karta

Ten kod tworzy podstawową kartę:

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

Przykład: złożona karta z kilkoma boksami

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

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

Najważniejsze informacje o kodzie

  • Pokazuje, jak wykorzystać różne elementy karty, takie jak header, title, leadingIcon i action, aby dostosować treść i strukturę karty.
  • Używa standardowego Card przeciążenia z działaniem, ponieważ tylko karta (lub jej wewnętrzne działanie) musi być zaznaczana. Jeśli chcesz, aby cała powierzchnia karty była interaktywna, użyj Card przeciążenia z onClick zamiast.
  • Ta karta używa boksu działania, więc powierzchnia karty nie jest możliwa do zaznaczenia, a zaznaczenie jest kierowane do przycisku polecenia.