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

No Glimmer do Jetpack Compose, o ListItem é o componente padrão para mostrar uma única linha de conteúdo. Os itens de lista são projetados para a interação baseada em foco dos óculos com tela virtual, então eles fornecem uma resposta visual integrada ao ganhar o foco.

O componente tem duas sobrecargas: uma com um parâmetro onClick para itens que acionam ações e uma versão apenas focalizável para conteúdo informativo que não exige uma ação de clique.

Figura 1. Um exemplo de duas listas com diferentes estilos de itens de lista no Glimmer do Jetpack Compose.

Uso em listas

Os itens de lista são a principal opção para linhas em uma lista, mas as listas podem também hospedar outros componentes, como um Card ou TitleChip, para fornecer ênfase visual diferente.

Os itens de lista usam o slot headlineContent para o texto principal, de modo a se alinhar aos componentes Card e TitleChip usados para outros itens.

Exemplo: item de lista básico

O código a seguir cria um item de lista básico:

@Composable
fun ListItemSample() {
    ListItem { Text("This is a list item") }
}

Exemplo: item de lista com um rótulo de suporte e ícones

O código a seguir cria um item de lista com um rótulo de suporte e ícones iniciais e finais:

@Composable
fun ListItemWithIconsSample() {
    ListItem(
        leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
        trailingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") }
    ) {
        Text("This is a list item with icons")
    }
}