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 exibição

Saiba mais sobre esses dispositivos →

No Jetpack Compose Glimmer, o GlimmerLazyColumn funciona de maneira semelhante a um LazyColumn do Compose, compondo e apresentando apenas os itens visíveis para manter a alta performance. No entanto, as colunas lentas do Glimmer são criadas para controles de óculos de exibição, em que o usuário interage usando um touchpad em vez de uma tela touchscreen. Enquanto um usuário de dispositivo móvel pode tocar em qualquer coordenada em uma tela a qualquer momento, um usuário com óculos de exibição só pode interagir com o item que está em foco.

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

Comportamento de foco e itens filhos

As colunas lentas do Glimmer processam automaticamente a navegação com base no foco. Ao contrário das listas para dispositivos móveis, em que o foco e a rolagem costumam ser separados, uma coluna lenta do Glimmer coordena os dois movendo o foco pelos itens filhos à medida que o usuário rola com o touchpad. A lista em si não pode ser focada. Portanto, ela gerencia e solicita o foco dos filhos para que o usuário tenha um ponto de interação claro durante a rolagem.

Como não há entrada de toque direta, torne todos os itens filhos em uma coluna lenta do Glimmer focáveis. Quando os itens estiverem em foco, também forneça uma resposta visual, como uma borda ativa ou um destaque. Embora os usuários ainda possam rolar itens não focáveis, eles não podem interagir com eles. Use componentes integrados como ListItem ou Card sempre que possível, porque esses componentes já podem ser focados e fornecem feedback visual para estados de foco.

Exemplo: colunas lentas do Glimmer com vários itens

O código a seguir mostra como usar uma coluna lenta do Glimmer com os métodos DSL de item e itens para criar uma lista de itens:

@Composable
fun GlimmerLazyColumnSample() {
    GlimmerLazyColumn {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}
GlimmerLazyColumnSamples.kt

**Cuidado** :para óculos de exibição, não use a LazyColumn do Compose, exceto em casos raros em que a rolagem é gerenciada de maneira totalmente programática.

Exemplo: colunas lentas do Glimmer com um slot de título

O Jetpack Compose Glimmer também fornece uma sobrecarga de GlimmerLazyColumn que contém um slot de título. O título não focável, normalmente um TitleChip, permanece estático na parte superior central enquanto o conteúdo da lista é rolado abaixo dele.

O código a seguir cria uma coluna lenta do Glimmer com um slot de título:

@Composable
fun GlimmerLazyColumnWithTitleChipSample() {
    val ingredientItems =
        listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon")
    GlimmerLazyColumn(title = { TitleChip { Text("Ingredients") } }) {
        items(ingredientItems) { text -> ListItem { Text(text) } }
    }
}
GlimmerLazyColumnSamples.kt

Usar o estado de lista lenta do Glimmer para operações de lista programáticas

Para controlar e observar diferentes aspectos do estado da lista, como a posição de rolagem usando as propriedades firstVisibleItemIndex e firstVisibleItemScrollOffset, use GlimmerLazyListState.

Você pode elevar esse estado usando rememberGlimmerLazyListState para rolar de maneira programática usando scrollToItem e animateScrollToItem.