Cards no Jetpack Compose Glimmer

Dispositivos XR relevantes
Estas orientações ajudam você a criar experiências para esses tipos de dispositivos XR.
Saiba mais sobre tipos de dispositivos XR →
Óculos de exibição
Saiba mais sobre tipos de dispositivos XR →

No Glimmer do Jetpack Compose, o Card componente serve como o contêiner principal para conteúdo relacionado, criando um limite visual claro para unidades de informação digeríveis. Os cards são altamente adaptáveis, oferecendo suporte a combinações de conteúdo principal, títulos opcionais, subtítulos e ícones principais ou finais. Os cards preenchem a largura máxima disponível por padrão, são focalizáveis e também podem ser clicáveis. Os cards oferecem suporte a um arranjo vertical em que a imagem do cabeçalho fica na parte de cima, seguida pelo título, subtítulo e conteúdo do corpo.

Os cards são criados no sistema de superfície do Glimmer do Jetpack Compose surface system, portanto, eles herdam propriedades físicas, como efeitos de profundidade, recorte e destaques de borda consistentes.

Figura 1. Um exemplo de alguns estilos diferentes de cards no Glimmer do Jetpack Compose.

Anatomia e slots

Um card do Glimmer do Jetpack Compose é criado com vários elementos especializados que permitem personalizar o conteúdo e o layout.

Slot Descrição

Cabeçalho

A seção superior do card, projetada para conter uma imagem.

Título e subtítulo

Esses campos de texto fornecem os rótulos principal e secundário do card. O título é colocado acima do subtítulo.

Ícone principal

Um ícone opcional (normalmente um Icon) que aparece no início da área de conteúdo do card.

Ícone final

Um ícone opcional que aparece no final da área de conteúdo do card.

Conteúdo principal

O corpo principal do card para Text ou conteúdo principal.

Padrões de card

Os seguintes padrões se aplicam aos cards:

Exemplo: card básico

O código a seguir mostra o código mínimo necessário para criar um card:

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

Exemplo: card com vários slots

O código a seguir mostra como usar vários slots juntos para criar um 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") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}

Pontos principais sobre o código

  • Mostra como usar vários elementos de card, como title, subtitle e leadingIcon, para personalizar o conteúdo e a estrutura do card.
  • Usa a Card sobrecarga com onClick para tornar toda a superfície do card interativa.

Cards de ação

Se você quiser incluir um botão de ação com um card, use um ActionCard. Os cards de ação têm os mesmos elementos que os cards padrão e também incluem um parâmetro action adicional que define o botão inferior.

Figura 2. Um exemplo de um ActionCard no Glimmer do Jetpack Compose.

Exemplo: card de ação básico

Este código mostra como criar um 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")
}

Exemplo: card de ação com um ícone

Este código mostra como criar um ActionCard mais complexo com ícones:

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
    )
}