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 →

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, podem ser focados 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, então eles herdam propriedades físicas, como efeitos de profundidade, recorte e destaques de borda consistentes.

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.

Padrões de card

Os seguintes padrões se aplicam aos cards:

• Largura: os cards preenchem a largura máxima disponível da tela para otimizar a legibilidade em óculos de exibição.
• Altura mínima: 80.dp
• Espaçamento vertical do texto: 3.dp
• Forma do cabeçalho: usa RoundedCornerShape com cantos de 24.dp
• Padding de conteúdo: o padrão é GlimmerTheme.componentSpacingValues.medium. Isso afeta o padding mais externo em torno das imagens de cabeçalho e do contêiner de conteúdo.
• Forma: o padrão é GlimmerTheme.shapes.medium.

• Renderização de texto: usa os valores padrão de GlimmerTheme.typography para os seguintes slots:

  • Título: bodyMedium
  • Subtítulo: caption
  • Conteúdo principal: bodySmall

Exemplo: card básico

O código a seguir cria um card básico:

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

Exemplo: card complexo com vários slots

O código a seguir mostra como usar vários slots juntos para criar um 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")
    }
}
CardSamples.kt

Pontos principais sobre o código

• Mostra como usar vários elementos de card, como header, title, leadingIcon e action, para personalizar o conteúdo e a estrutura do card.
• Usa a sobrecarga Card padrão com uma ação porque apenas o card (ou a ação interna dele) precisa ser focalizável. Se você precisar tornar a superfície inteira do card interativa, use a sobrecarga Card com onClick em vez disso.
• Esse card usa um slot de ação, então a superfície do card não é focalizável, e o foco é direcionado ao botão de ação.