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 tipos de dispositivos XR →
Óculos de exibição
Saiba mais sobre tipos de dispositivos XR →

No Glimmer do Jetpack Compose, o TitleChip componente é não interativo e fornece um contexto breve ou rótulo para conteúdo associado, como um Card ou uma VerticalList.

Use chips de título para informações concisas, como um título curto, um nome de categoria ou um indicador de status. Normalmente, você precisa colocar os chips de título acima do conteúdo que eles descrevem para estabelecer uma relação estrutural clara.

Figura 1. Um exemplo de chip de título de estilo padrão e chip de título fixo no Glimmer do Jetpack Compose. Cada chip de título tem um rótulo (1) e um ícone ou entidade inicial opcional (2).

Exemplo básico: criar um chip de título curto

O código a seguir cria um chip de título básico:

@Composable
fun BasicTitleChipSample() {
    TitleChip { Text("Messages") }
}

Exemplo básico: criar um chip de título com um ícone

O código a seguir cria um chip de título com um ícone:

@Composable
fun TitleChipWithIconSample() {
    TitleChip {
        Icon(FavoriteIcon, contentDescription = "Favorite")
        Text("Favorites")
    }
}

Exemplo: criar um chip de título com um card

Para usar um chip de título com outro componente, coloque o chip de título TitleChipDefaults.associatedContentSpacing acima do outro componente em função de composição. O código a seguir cria um chip de título com um card:

@Composable
fun TitleChipWithCardSample() {
    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 chip de título é centralizado horizontalmente, que é o alinhamento usual para um chip de título colocado acima de um card.
  • O Spacer tem uma altura fixa para fornecer a quantidade certa de espaçamento vertical entre os dois componentes. Isso é definido usando TitleChipDefaults.associatedContentSpacing.
  • Usa um leadingIcon opcional para adicionar contexto visual extra antes do conteúdo de texto.
  • O chip de título usa automaticamente o caption estilo para o texto.
  • O chip de título não é interativo. Se você precisar de um rótulo clicável, use um Button ou outro componente interativo.