Чипы названий в Jetpack Compose Glimmer

Применимые устройства XR
Данное руководство поможет вам создавать приложения для устройств XR такого типа.
Узнайте о типах устройств XR →
Очки с искусственным интеллектом
Узнайте о типах устройств XR →

В Jetpack Compose Glimmer компонент TitleChip предназначен для предоставления краткой, неинтерактивной метки для связанного контента, например, карточки. Используйте TitleChip для отображения лаконичной информации, такой как короткий заголовок, имя или статус. Поскольку TitleChip не фокусируются и не являются интерактивными, они выполняют чисто информационную роль в пользовательском интерфейсе Jetpack Compose Glimmer. Например, вы можете разместить TitleChip с надписью «Ингредиенты» рядом с прокручиваемым списком ингредиентов.

Рисунок 1. Пример нескольких различных стилей заголовков в Jetpack Compose Glimmer.

Отображаются стандартный и фиксированный заголовочные фишки. Фиксированные заголовочные фишки отображаются с контуром.

  1. Название чипсов этикетка
  2. Необязательный ведущий значок или объект

Простой пример: Отображение короткого заголовка.

Создать короткий заголовок можно с помощью очень небольшого количества кода:

TitleChip { Text("Messages") }

Подробный пример: Отображение титульного чипа с помощью карты.

Чтобы использовать элемент заголовка с другим компонентом, разместите элемент заголовка TitleChipDefaults.AssociatedContentSpacing над другим компонентом в составном элементе. Следующий код показывает, как использовать элемент заголовка с карточкой:

@Composable
fun TitleChipExample() {
    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 .