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

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

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

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

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

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

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

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

Example: Create a title chip with a card

To use a title chip with another component, place the title chip TitleChipDefaults.associatedContentSpacing above the other component in the composable. The following code creates a title chip with a card:

@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 или другой интерактивный компонент.