Карты в Jetpack Compose Glimmer

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

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

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

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

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

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

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

Заголовок

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

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

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

Ведущая икона

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

Завершающий значок

Дополнительный значок, который отображается в конце области содержимого карточки.

Основное содержание

Основная часть карточки, содержащая главный Text или контент.

Неуплата по карте

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

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

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

Пример: Сложная карта с несколькими слотами.

Приведённый ниже код демонстрирует, как использовать несколько слотов одновременно для создания карточки. 

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

Основные моменты, касающиеся кода.

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