Listas 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 GlimmerLazyColumn funciona de manera similar a un Compose LazyColumn, ya que solo compone y muestra los elementos visibles para mantener un alto rendimiento. Sin embargo, las columnas diferidas de Glimmer se compilan para los controles de los lentes de visualización, en los que el usuario interactúa con un panel táctil en lugar de una pantalla táctil. Mientras que un usuario de dispositivos móviles puede presionar cualquier coordenada en una pantalla en cualquier momento, un usuario con lentes de visualización solo puede interactuar con el elemento que tiene el foco.

Figura 1. Un ejemplo de algunos estilos diferentes de listas en Jetpack Compose Glimmer.

Comportamiento del foco y elementos secundarios

Las columnas diferidas de Glimmer controlan automáticamente la navegación basada en el foco. A diferencia de las listas para dispositivos móviles, en las que el foco y el desplazamiento suelen estar separados, una columna diferida de Glimmer coordina los dos elementos moviendo el foco a través de sus elementos secundarios a medida que el usuario se desplaza con el panel táctil. La lista en sí no se puede enfocar, por lo que administra y solicita el foco para sus elementos secundarios de modo que el usuario tenga un punto de interacción claro mientras se desplaza.

Como no hay entrada táctil directa, haz que todos los elementos secundarios dentro de una columna diferida de Glimmer se puedan enfocar. Cuando los elementos tengan el foco, también proporciona una respuesta visual, como un borde activo o un resaltado. Si bien los usuarios pueden seguir desplazándose más allá de los elementos que no se pueden enfocar, no pueden interactuar con ellos. Usa componentes integrados como ListItem o Card siempre que sea posible, ya que estos componentes ya se pueden enfocar y proporcionan comentarios visuales para los estados de foco.

Ejemplo: Columnas diferidas de Glimmer con varios elementos

En el siguiente código, se muestra cómo usar una columna diferida de Glimmer con métodos DSL de elementos y elementos para crear una lista de elementos:

@Composable
fun GlimmerLazyColumnSample() {
    GlimmerLazyColumn {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}

Ejemplo: Columnas diferidas de Glimmer con un espacio para el título

Jetpack Compose Glimmer también proporciona una sobrecarga de GlimmerLazyColumn que contiene un espacio para el título. El título que no se puede enfocar, por lo general, un TitleChip, permanece estático en la parte superior central mientras el contenido de la lista se desplaza debajo de él.

Con el siguiente código, se crea una columna diferida de Glimmer con un espacio para el título:

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

Usa el estado de la lista diferida de Glimmer para las operaciones de lista programáticas

Para controlar y observar diferentes aspectos del estado de la lista, como su posición de desplazamiento con las propiedades firstVisibleItemIndex y firstVisibleItemScrollOffset, usa GlimmerLazyListState.

Puedes elevar este estado con rememberGlimmerLazyListState para desplazarte de forma programática con scrollToItem y animateScrollToItem.