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 con IA
Más información sobre los tipos de dispositivos de realidad extendida →

En Jetpack Compose Glimmer, las listas son componentes de la IU con desplazamiento vertical que renderizan de manera eficiente solo los elementos visibles, diseñados para proporcionar comportamientos específicos y compatibilidad de entrada para las apps de lentes con IA. Jetpack Compose Glimmer logra esto con los componentes VerticalList y ListItem.

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

El componente VerticalList de Glimmer de Jetpack Compose se usa para mostrar contenido vertical desplazable. Ofrece la misma funcionalidad de la API que LazyColumn, pero con comportamientos optimizados específicamente para las gafas Glimmer y las gafas con IA de Jetpack Compose con una pantalla.

Las listas de Glimmer de Jetpack Compose tienen algunas restricciones únicas:

  • Cuando una lista contiene más elementos de los que caben en una vista, se usa una pantalla negra cerca de los límites de la lista.

Ejemplo: Muestra una lista vertical con tres elementos

En el siguiente código, se muestra cómo usar los componentes VerticalList y ListItem para crear una lista de tres elementos:

@Composable
fun GlimmerListWithButtons() {
    VerticalList(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        items(count = 3) { index ->
            ListItem(
                onClick = { /* Handle Click */ },
                leadingIcon = if (index == 1) {
                    { Icon(Icons.Rounded.Favorite, "Favorite Icon") }
                } else null
            ) {
                Text("List Item + $index")
            }
        }
    }
}

Puntos clave sobre el código

  • La lista muestra tres elementos que se generan de forma dinámica, y cada uno es un ListItem.
  • Cada ListItem se puede personalizar y se le puede agregar un ícono.