Карточки в Jetpack Compose Glimmer

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

В Jetpack Compose Glimmer компонент Card служит основным контейнером для связанного контента, создавая четкую визуальную границу для удобного восприятия информации. Карточки очень гибкие и могут содержать основной контент, необязательные заголовки, субтитры и значки в начале или конце. Карточки по умолчанию занимают всю доступную ширину, на них можно переходить с помощью фокуса и нажимать на них. Карточки поддерживают вертикальное расположение, при котором изображение заголовка находится вверху, за ним следуют заголовок, подзаголовок и основной контент.

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

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

Анатомия и слоты

Карточка Glimmer, созданная с помощью Jetpack Compose, состоит из нескольких специализированных элементов, которые позволяют настраивать ее контент и макет.

Слот Описание

Заголовок

Верхняя часть карточки, предназначенная для изображения.

Заголовок и подзаголовок

Эти текстовые поля содержат основной и дополнительный ярлыки для карточки. Название размещается над субтитрами.

Значок перед текстом

Необязательный значок (обычно Icon), который появляется в начале области контента карточки.

Значок в конце

Необязательный значок, который появляется в конце области контента карточки.

Основной контент

Основная часть карточки для основного Text или контента.

Настройки карточек по умолчанию

Для карточек действуют следующие настройки по умолчанию:

  • Ширина. Карточки занимают всю доступную ширину экрана, чтобы их было удобнее читать на дисплее очков.
  • Минимальная высота: 80.dp
  • Вертикальное расстояние между строками текста: 3.dp
  • Форма заголовка: RoundedCornerShape с 24.dp углами.
  • Внутренние отступы по умолчанию равны GlimmerTheme.componentSpacingValues.medium. Это влияет на внешние отступы вокруг изображений в заголовках и контейнера контента.
  • Форма – по умолчанию GlimmerTheme.shapes.medium.

  • Отрисовка текста. Использует значения по умолчанию из GlimmerTheme.typography для следующих мест размещения:

Пример: базовая карточка

Ниже приведен минимальный код, необходимый для создания карточки:

Card { Text("This is a card") }

Пример: карточка с несколькими слотами

В следующем коде показано, как использовать несколько слотов для создания карточки:

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") }
) {
    Text("This is a complete card")
}

Ключевые моменты

  • Показывает, как использовать различные элементы карточки, например title, subtitle и leadingIcon, чтобы настроить контент и структуру карточки.
  • Использует перегрузку Card с onClick, чтобы сделать всю поверхность карточки интерактивной.

Карточки действий

Если вы хотите добавить на карточку командную кнопку, используйте объект ActionCard. Карточки действий содержат те же элементы, что и стандартные карточки, а также дополнительный параметр action, который определяет кнопку внизу.

Рисунок 2. Пример использования ActionCard в Jetpack Compose Glimmer

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

В этом коде показано, как создать ActionCard:

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}

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

В этом коде показано, как создать более сложный объект ActionCard со значками:

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}