Chips de título no Glimmer do Jetpack Compose

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 TitleChip foi projetado para fornecer um rótulo breve e não interativo para conteúdo associado, como um card. Use ícones de título para mostrar informações concisas, como um título curto, um nome ou um status. Como os chips de título não são focalizáveis nem interativos, eles têm uma função puramente informativa em uma interface do Glimmer do Jetpack Compose. Por exemplo, você pode fornecer um ícone de título chamado "Ingredientes" ao lado de uma lista rolável de ingredientes.

Exemplo básico: mostrar um ícone de título curto

É possível criar um ícone de título curto com muito pouco código:

TitleChip { Text("Messages") }

Exemplo detalhado: mostrar um ícone de título com um card

Para usar um ícone de título com outro componente, coloque o ícone de título TitleChipDefaults.AssociatedContentSpacing acima do outro componente no combinável. O código a seguir mostra como usar um ícone de título com um card:

@Composable
fun TitleChipExample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
        Card(
            title = { Text("Title") },
            subtitle = { Text("Subtitle") },
            leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        ) {
            Text("Card Content")
        }
    }
}

Pontos principais sobre o código

• O Spacer tem uma altura fixa para fornecer o espaçamento vertical correto, definido por TitleChipDefaults.AssociatedContentSpacing, entre os dois componentes.