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

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

В Jetpack Compose Glimmer компонент TitleChip не является интерактивным и используется для краткого описания или обозначения связанного контента, например Card или GlimmerLazyColumn.

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

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

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

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

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

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

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

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

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

Чтобы использовать элемент TitleChip с другим компонентом, поместите его 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 или другой интерактивный компонент.