Pilhas verticais 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 VerticalStack é um layout lento e com rolagem vertical que organiza itens em uma sequência tridimensional visualmente sobreposta. O item principal é exibido em destaque no primeiro plano, enquanto os itens subsequentes são posicionados atrás dele.

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

Comportamentos de rolagem e posicionamento

Como as pilhas mantêm os itens organizados em um layout compacto e sobreposto, elas têm alguns comportamentos diferentes de outros tipos de componentes sequenciados, como listas:

  • À medida que um usuário rola verticalmente, o item ativo do primeiro plano sai da visualização, permitindo que o item imediatamente abaixo dele deslize para a posição de destaque do primeiro plano.
  • Os itens sempre são animados com um ajuste usando uma animação de mola especializada para a posição de primeiro plano após o gesto de um usuário terminar.
  • Os itens são posicionados ao longo do eixo z, com itens mais adiante na lista colocados atrás do item principal.

Gerenciamento de foco

O VerticalStack usa um sistema de foco especializado para garantir que o item atual do primeiro plano seja sempre o principal destino da interação do usuário:

  • Foco inicial e reentrada: o foco inicial e a reentrada de foco vão para o item superior atual da pilha.
  • Notificação de foco automático: à medida que os itens fazem a transição, a pilha solicita o foco para o item superior.
  • Rastreamento de foco: cada item usa onFocusChanged para notificar o StackState do status de foco individual.

Exemplo: criar uma pilha vertical

O código a seguir cria uma pilha vertical com alguns itens de card:

@Composable
fun VerticalStackSample() {
    VerticalStack {
        item {
            Card { Text("Top Card") }
        }
        item {
            Card { Text("Second Card") }
        }
        item {
            Card { Text("Third Card") }
        }
    }
}