Карты в Jetpack Compose Glimmer

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

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

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

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

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

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

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

Заголовок

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

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

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

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

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

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

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

Действие

Слот для основного интерактивного элемента, например, Button .

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

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

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

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

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

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

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

Следующий код создает простую карточку: 

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}

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

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

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}

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

  • В этом примере показано, как использовать различные элементы карточки, такие как header , title , leadingIcon и action , для настройки содержимого и структуры карточки.
  • Используется стандартная перегрузка Card с действием, поскольку фокусироваться должна только сама карточка (или её внутреннее действие). Если вам нужно сделать интерактивной всю поверхность карточки, используйте вместо этого перегрузку Card с onClick .
  • Эта карта использует слот действия, поэтому поверхность карты не является фокусируемой, и фокус направлен на кнопку действия.