Pilas verticales en Jetpack Compose Glimmer

Dispositivos de realidad extendida correspondientes
Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de realidad extendida.
Más información sobre los tipos de dispositivos de realidad extendida →
Lentes de visualización
Más información sobre los tipos de dispositivos de realidad extendida →

En Jetpack Compose Glimmer, el VerticalStack es un diseño diferido con desplazamiento vertical que organiza los elementos en una secuencia tridimensional superpuesta visualmente. El elemento principal se muestra de forma destacada en primer plano, mientras que los elementos posteriores se colocan detrás de él.

Figura 1. Ejemplo de algunos estilos diferentes de pilas en Jetpack Compose Glimmer

Comportamientos de desplazamiento y posicionamiento

Debido a que las pilas mantienen los elementos organizados en un diseño compacto y superpuesto, tienen algunos comportamientos que son diferentes de otros tipos de componentes secuenciados, como las listas:

  • A medida que un usuario se desplaza verticalmente, el elemento activo en primer plano desaparece de la vista, lo que permite que el elemento que está inmediatamente debajo se deslice hacia la posición destacada en primer plano.
  • Los elementos siempre se ajustan con una animación de resorte especializada a la posición en primer plano después de que finaliza el gesto de un usuario.
  • Los elementos se posicionan a lo largo del eje z, con elementos más alejados en la lista colocados detrás del elemento principal.

Administración de focos

VerticalStack usa un sistema de enfoque especializado para garantizar que el elemento actual en primer plano sea siempre el objetivo principal para la interacción del usuario:

  • Enfoque inicial y reingreso: El enfoque inicial y el reingreso del enfoque van al elemento superior actual de la pila.
  • Notificación de enfoque automático: A medida que los elementos hacen la transición, la pila solicita el enfoque para el elemento superior.
  • Seguimiento del enfoque: Cada elemento usa onFocusChanged para notificar a StackState su estado de enfoque individual.

Ejemplo: Crea una pila vertical

El siguiente código crea una pila vertical con algunos elementos de tarjeta:

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