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 →

Saiba mais sobre tipos de dispositivos XR →

No Glimmer do Jetpack Compose, o VerticalStack é um layout com rolagem vertical lenta que organiza os 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.

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 movimento rápido 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 vários itens:

@Composable
fun VerticalStackSample() {
    VerticalStack(modifier = Modifier.fillMaxWidth().height(364.dp)) {
        item(key = 0) {
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-0",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
        items(count = 10, key = { it + 1 }) { index ->
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-${index + 1}",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
    }
}
StackSamples.kt

Pontos principais sobre o código

• Define textMotion para o LocalTextStyle do texto como Animated. Isso promove a renderização de texto suave durante animações de layout ou transições de escalonamento para evitar artefatos de ajuste de pixels.
• Fornece um tamanho específico de 364.dp para a altura da pilha vertical. Sempre forneça uma altura específica, use um modificador de altura ou aplique o fillMaxSize modificador para definir a área visual para transições de card.
• Ao contrário de outros componentes que usam um parâmetro de forma diretamente, VerticalStack gerencia os limites visuais dos itens usando o itemDecoration modificador. Este exemplo transmite a mesma forma para o itemDecoration do item inicial como todos os itens filhos para manter o recorte e os efeitos visuais consistentes. Este exemplo usa o padrão CardDefaults.shape.