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 →

Más información sobre los tipos de dispositivos de realidad extendida →

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

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 el usuario se desplaza verticalmente, el elemento activo en primer plano desaparece de la vista, lo que permite que el elemento que se encuentra inmediatamente debajo se deslice a la posición destacada en primer plano.
• Los elementos siempre se animan con una animación de resorte especializada en la posición de primer plano después de que finaliza el gesto del usuario.
• Los elementos se posicionan a lo largo del eje Z, y los elementos que se encuentran más adelante en la lista se colocan detrás del elemento principal.

Administración de focos

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

• Enfoque inicial y reingreso: El enfoque inicial y el reingreso del enfoque se dirigen al elemento superior actual de la pila.
• Notificación de enfoque automático: A medida que los elementos cambian, 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 varios elementos:

@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

Puntos clave sobre el código

• Establece textMotion para el LocalTextStyle del texto en Animated. Esto promueve la renderización fluida del texto durante las animaciones de diseño o las transiciones de escalamiento para evitar artefactos de ajuste de píxeles.
• Proporciona un tamaño específico de 364.dp para la altura de la pila vertical. Siempre proporciona una altura específica, usa un modificador de altura o aplica el modificador fillMaxSize para definir el área visual de las transiciones de tarjetas.
• A diferencia de otros componentes que toman un parámetro de forma directamente, VerticalStack administra los límites visuales de sus elementos con el modificador itemDecoration. En este ejemplo, se pasa la misma forma para el itemDecoration del elemento inicial que para todos los elementos secundarios para mantener un recorte y efectos visuales coherentes. En este ejemplo, se usa el CardDefaults.shape predeterminado.