Chips de título no Glimmer do Jetpack Compose

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

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

Figura 1. Um exemplo de alguns estilos diferentes de chips de título no Glimmer do Jetpack Compose.

Chip de título padrão e chip de título fixo mostrados. Os ícones de título fixo são mostrados com um contorno.

  1. Rótulo dos ícones de título
  2. Ícone ou entidade inicial opcional

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

É possível criar um chip 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