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 →

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

En Jetpack Compose Glimmer, el VerticalList funciona de manera similar a un Compose LazyColumn, ya que solo compone y muestra los elementos visibles para mantener un alto rendimiento. Sin embargo, para Jetpack Compose Glimmer, las listas verticales 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. Si bien 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 enfoque.

Comportamiento del enfoque y elementos secundarios

Las listas verticales están optimizadas para controlar la navegación basada en el enfoque de forma automática. A diferencia de las listas para dispositivos móviles, en las que el enfoque y el desplazamiento suelen estar separados, una lista vertical organiza los dos elementos moviendo el enfoque 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 enfoque 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 que coloques dentro de una lista vertical se puedan enfocar y proporciona una respuesta visual cuando los elementos tengan el enfoque, como un borde activo o un resaltado. Si bien los usuarios pueden seguir desplazándose por los elementos que no se pueden enfocar, no pueden interactuar con ellos. Usa componentes integrados como ListItem o Card dentro de tus listas verticales siempre que sea posible, ya que estos componentes ya se pueden enfocar y proporcionan comentarios visuales para los estados de enfoque.

Ejemplo: Lista vertical con varios elementos

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

@Composable
fun VerticalListSample() {
    VerticalList {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}
ListSamples.kt

Ejemplo: Lista vertical con un espacio para el título

Jetpack Compose Glimmer también proporciona una sobrecarga de la lista vertical 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 el centro superior mientras el contenido de la lista se desplaza debajo de él.

Con el siguiente código, se crea una lista vertical con un espacio para el título:

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

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

Usa ListState para controlar y observar diferentes aspectos del estado de la lista, como su posición de desplazamiento con las propiedades firstVisibleItemIndex y firstVisibleItemScrollOffset.

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