Listas 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 esses dispositivos →
Óculos de IA
Saiba mais sobre esses dispositivos →

No Glimmer do Jetpack Compose, as listas são componentes de interface roláveis verticalmente que renderizam com eficiência apenas os itens visíveis, projetados para fornecer comportamentos específicos e compatibilidade de entrada para apps de óculos com IA. O Jetpack Compose Glimmer faz isso usando os componentes VerticalList e ListItem.

Figura 1. Um exemplo de alguns estilos diferentes de listas no Jetpack Compose Glimmer.

O VerticalList é o componente do Glimmer do Jetpack Compose para mostrar conteúdo vertical rolável. Ele oferece a mesma funcionalidade de API que LazyColumn, mas com comportamentos especificamente otimizados para o Jetpack Compose Glimmer e óculos com IA com tela.

As listas do Glimmer do Jetpack Compose têm algumas restrições exclusivas:

  • Quando uma lista tem mais itens do que cabe em uma visualização, um scrim preto é usado perto dos limites da lista.

Exemplo: mostrar uma lista vertical com três itens

O código a seguir mostra como usar um VerticalList e componentes ListItem para criar uma lista de três itens:

@Composable
fun GlimmerListWithButtons() {
    VerticalList(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        items(count = 3) { index ->
            ListItem(
                onClick = { /* Handle Click */ },
                leadingIcon = if (index == 1) {
                    { Icon(Icons.Rounded.Favorite, "Favorite Icon") }
                } else null
            ) {
                Text("List Item + $index")
            }
        }
    }
}

Pontos principais sobre o código

  • A lista mostra três itens gerados dinamicamente, sendo cada um um ListItem.
  • Cada ListItem pode ser personalizado, e um ícone pode ser adicionado a ele.