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 tipos de dispositivos XR →

Saiba mais sobre tipos de dispositivos XR →

No Glimmer do Jetpack Compose, o VerticalList funciona de maneira semelhante a um Compose LazyColumn, compondo e apresentando apenas os itens visíveis para manter o alto desempenho. No entanto, para o Glimmer do Jetpack Compose, as listas verticais são criadas para controles de óculos de exibição, em que o usuário interage usando um touchpad em vez de uma tela sensível ao toque. Enquanto um usuário de dispositivos móveis 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.

Comportamento de foco e itens filhos

As listas verticais são otimizadas para processar a navegação baseada em foco automaticamente. Ao contrário das listas para dispositivos móveis, em que o foco e a rolagem costumam ser separados, uma lista vertical organiza 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 para os 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 que você coloca em uma lista vertical focáveis e forneça uma resposta visual quando os itens estiverem em foco, como uma borda ativa ou 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, nas listas verticais sempre que possível, porque esses componentes já são focalizáveis e fornecem feedback visual para estados de foco.

Exemplo: lista vertical com vários itens

O código a seguir mostra como usar uma lista vertical com métodos DSL de item e itens para criar uma lista de itens:

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

Exemplo: lista vertical com um slot de título

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

O código a seguir cria uma lista vertical com um slot de título:

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

Usar o estado da lista para operações programáticas

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

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