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

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

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

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

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

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

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 , между двумя компонентами.