Cards no Jetpack Compose Glimmer

Dispositivos XR aplicáveis

Estas orientações ajudam você a criar experiências para esses tipos de dispositivos de XR.

Saiba mais sobre os tipos de dispositivos XR →

Saiba mais sobre os tipos de dispositivos XR →

No Glimmer do Jetpack Compose, o componente Card foi projetado para agrupar e mostrar informações relacionadas em uma única unidade. Os cards são altamente adaptáveis e oferecem suporte a combinações de conteúdo principal, títulos e subtítulos opcionais e ícones à esquerda ou à direita. Por padrão, os cards preenchem a largura máxima da tela dos óculos de IA, podem ser focados e também clicados.

Anatomia e slots de cards

Um card de brilho do Jetpack Compose é criado com vários elementos especializados, permitindo personalizar o conteúdo e o layout.

• 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.

• Ícone principal: um ícone opcional que aparece no início da área de conteúdo do card.

• Ícone à direita: um ícone opcional que aparece no final da área de conteúdo do card.

• Ação: um slot para um elemento interativo principal, como um botão. Isso permite que os usuários realizem uma ação diretamente do card. O slot está disponível em uma sobrecarga separada do elemento combinável Card.

• Conteúdo principal: o corpo principal do card, onde você coloca o texto principal ou outro conteúdo.

Exemplo básico: criar um card básico

É possível criar um card muito básico com pouco código:

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

Exemplo detalhado: mostrar um card complexo

O código a seguir mostra como usar vários slots juntos para criar um card. Ele também mostra como parear um Card com um 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")
        }
    }
}

Pontos principais sobre o código

• Mostra como usar vários elementos de card, como header, title, subtitle, leadingIcon e action, para personalizar o conteúdo e a estrutura do card.
• Mostra um exemplo de como colocar um TitleChip e usar um Spacer.