Переключатели заголовков в Jetpack Compose Glimmer

Поддерживаемые XR-устройства
Это руководство поможет вам создавать контент для таких устройств.
Подробнее о типах XR-устройств
Очки
Подробнее о типах XR-устройств

В Jetpack Compose Glimmer компонент TitleChip – это неинтерактивный компонент, который предоставляет краткий контекст или ярлык для связанного контента, например Card или VerticalList.

Используйте чипы заголовков для краткой информации, например короткого названия, названия категории или индикатора статуса. Обычно чипы с заголовками размещаются над контентом, к которому они относятся, чтобы установить четкую структурную связь.

Рисунок 1. Пример чипа с названием в стиле по умолчанию и закрепленного чипа с названием в Jetpack Compose Glimmer. У каждого чипа есть ярлык (1) и необязательный значок или объект (2).

Пример: создание чипа с кратким названием

В следующем примере кода создается простой чип с заголовком:

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

Пример: создание чипа заголовка со значком

Следующий код создает чип с заголовком и значком:

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

Пример: создание чипа заголовка с карточкой

Чтобы использовать чип с заголовком вместе с другим компонентом, поместите чип с заголовком TitleChipDefaults.associatedContentSpacing над другим компонентом в composable-функции. В приведенном ниже коде создается чип с заголовком и карточка:

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

Ключевые моменты

  • Чип заголовка выровнен по горизонтали по центру, что является стандартным выравниванием для чипа заголовка, размещенного над карточкой.
  • У элемента Spacer фиксированная высота, чтобы обеспечить правильное вертикальное расстояние между двумя компонентами. Определяется с помощью тега TitleChipDefaults.associatedContentSpacing.
  • Использует необязательный символ leadingIcon, чтобы добавить дополнительный визуальный контекст перед текстовым контентом.
  • Для текста в чипе заголовка автоматически используется стиль caption.
  • Чип с названием не интерактивный. Если вам нужна интерактивная метка, используйте Button или другой интерактивный компонент.