Elementy tytułu 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 TitleChip jest komponentem nieinteraktywnym który zapewnia krótki kontekst lub etykietę powiązanych treści, takich jak Card lub VerticalList.

Używaj etykiet tytułów do zwięzłych informacji, takich jak krótki tytuł, nazwa kategorii lub wskaźnik stanu. Zwykle etykiety tytułów należy umieszczać nad opisywanymi treściami, aby zapewnić wyraźną zależność strukturalną.

Rysunek 1. Przykład domyślnej etykiety tytułu i etykiety tytułu przyklejonego w Glimmerze w Jetpack Compose. Każda etykieta tytułu ma etykietę (1) i opcjonalną ikonę lub encję (2).

Podstawowy przykład: tworzenie krótkiej etykiety tytułu

Poniższy kod tworzy podstawową etykietę tytułu:

@Composable
fun BasicTitleChipSample() {
    TitleChip { Text("Messages") }
}

Podstawowy przykład: tworzenie etykiety tytułu z ikoną

Poniższy kod tworzy etykietę tytułu z ikoną:

@Composable
fun TitleChipWithIconSample() {
    TitleChip {
        Icon(FavoriteIcon, contentDescription = "Favorite")
        Text("Favorites")
    }
}

Przykład: tworzenie etykiety tytułu z kartą

Aby użyć etykiety tytułu z innym komponentem, umieść etykietę tytułu TitleChipDefaults.associatedContentSpacing nad innym komponentem w komponencie. Poniższy kod tworzy etykietę tytułu z kartą:

@Composable
fun TitleChipWithCardSample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }

        Spacer(Modifier.height(TitleChipDefaults.associatedContentSpacing))

        Card(
            title = { Text("Title") },
            subtitle = { Text("Subtitle") },
            leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        ) {
            Text("Card Content")
        }
    }
}

Najważniejsze informacje o kodzie

  • Etykieta tytułu jest wyśrodkowana w poziomie, co jest zwykłym wyrównaniem etykiety tytułu umieszczonej nad kartą.
  • Element Spacer ma stałą wysokość, aby zapewnić odpowiednią ilość odstępu pionowego między 2 komponentami. Jest to zdefiniowane za pomocą TitleChipDefaults.associatedContentSpacing.
  • Używa opcjonalnego elementu leadingIcon, aby dodać dodatkowy kontekst wizualny przed treścią tekstową.
  • Etykieta tytułu automatycznie używa stylu caption dla tekstu.
  • Etykieta tytułu nie jest interaktywna. Jeśli potrzebujesz etykiety, którą można kliknąć, użyj Button lub innego komponentu interaktywnego.