Elementy tytułu w Jetpack Compose Glimmer

Odpowiednie urządzenia XR

Te wskazówki pomogą Ci tworzyć rozwiązania na te typy urządzeń XR.

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

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

W Jetpack Compose Glimmer komponent TitleChip jest nieinteraktywnym komponentem, który zapewnia krótki kontekst lub etykietę dla powiązanych treści, takich jak Card lub VerticalList.

Używaj elementów tytułowych, aby wyświetlać zwięzłe informacje, takie jak krótki tytuł, nazwa kategorii lub wskaźnik stanu. Zwykle należy umieszczać elementy tytułu nad opisywaną treścią, aby zachować jasną strukturę.

Podstawowy przykład: tworzenie elementu z krótkim tytułem

Ten kod tworzy podstawowy chip z tytułem:

@Composable
fun TitleChipSample() {
    TitleChip { Text("Messages") }
}
TitleChipSamples.kt

Example: Create a title chip with a card

To use a title chip with another component, place the title chip TitleChipDefaults.associatedContentSpacing above the other component in the composable. The following code creates a title chip with a card:

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

Najważniejsze informacje o kodzie

• Element z tytułem jest wyśrodkowany w poziomie, co jest typowym wyrównaniem w przypadku elementu z tytułem umieszczonego nad kartą.
• Spacer ma stałą wysokość, aby zapewnić odpowiednią ilość miejsca w pionie między tymi 2 komponentami. Jest ona definiowana za pomocą metody 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.
• Chip z tytułem nie jest interaktywny. Jeśli potrzebujesz etykiety, którą można kliknąć, użyj elementu Button lub innego komponentu interaktywnego.