Карты в Jetpack Compose Glimmer

Применимые устройства XR

Данное руководство поможет вам создавать приложения для устройств XR такого типа.

Узнайте о типах устройств XR →

Узнайте о типах устройств XR →

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

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

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

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

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

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

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

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

  • Название: bodyMedium
  • Субтитры: caption
  • Основное содержание: bodySmall

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

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

Card { Text("This is a card") }
CardSamples.kt

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

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

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") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}
CardSamples.kt

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

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

Карты действий

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

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

Этот код показывает, как создать 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")
}
CardSamples.kt

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

Этот код демонстрирует, как создать более сложную ActionCard с иконками:

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    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
    )
}
CardSamples.kt