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.
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 pantalla.
Las listas de Jetpack Compose Glimmer tienen algunas restricciones únicas:
- Las listas solo deben mostrar tres elementos o menos dentro de una vista.
- Cuando una lista contiene más elementos de los que caben en una vista, se usa una cortina 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
ListItemse puede personalizar y se le puede agregar un ícono.