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

Применимые устройства XR
Данное руководство поможет вам создавать приложения для устройств 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
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 или другой интерактивный компонент.