Карты в Jetpack Compose Glimmer

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

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

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

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

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

  • Заголовок : верхняя часть карточки, предназначенная для размещения изображения.

  • Заголовок и подзаголовок : эти текстовые поля содержат основную и дополнительную информацию о карточке.

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

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

  • Действие : слот для основного интерактивного элемента, например, кнопки. Это позволяет пользователям выполнять действия непосредственно с карточки. Слот доступен в отдельной перегрузке компонуемого элемента «Карточка».

  • Основное содержимое : основная часть карточки, где размещается основной текст или другой контент.

Простой пример: создание простой карты

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

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

Подробный пример: отображение сложной карты

Следующий код показывает, как использовать несколько слотов для создания карты. Он также показывает, как связать Card с TitleChip .

@Composable
fun SampleGlimmerCard() {
    val myHeaderImage = painterResource(id = R.drawable.header_image)
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
        Card(
            action = {
                Button(onClick = {}) {
                    Text("Action Button")
                }
            },
            header = {
                Image(
                    painter = myHeaderImage,
                    contentDescription = "Header image for the card",
                    contentScale = ContentScale.FillWidth
                )
            },
            title = { Text("Card Title") },
            subtitle = { Text("Card Subtitle") },
            leadingIcon = { FavoriteIcon, "Localized description" },
            trailingIcon = { FavoriteIcon, "Localized description" }
        ) {
            Text("A Jetpack Compose Glimmer Card using all available slots")
        }
    }
}

Ключевые моменты кода

  • Показывает, как использовать различные элементы карточки, такие как header , title , subtitle , leadingIcon и action , для настройки содержимого и структуры карточки.
  • Показывает пример того, как разместить TitleChip и использовать Spacer .