Elenchi in Jetpack Compose Glimmer

Dispositivi XR applicabili
Queste indicazioni ti aiutano a creare esperienze per questi tipi di dispositivi XR.
Scopri di più sui tipi di dispositivi XR →
AI Glasses
Scopri di più sui tipi di dispositivi XR →

In Jetpack Compose Glimmer, le liste sono componenti UI scorrevoli verticalmente che eseguono il rendering in modo efficiente solo degli elementi visibili, progettati per fornire comportamenti specifici e compatibilità di input per le app per occhiali AI. Jetpack Compose Glimmer lo fa utilizzando i componenti VerticalList e ListItem.

Figura 1. Un esempio di alcuni stili diversi di elenchi in Jetpack Compose Glimmer.

VerticalList è il componente di Jetpack Compose Glimmer per la visualizzazione di contenuti verticali scorrevoli. Offre la stessa funzionalità API di LazyColumn, ma con comportamenti ottimizzati in modo specifico per Jetpack Compose Glimmer e occhiali AI con display.

Gli elenchi di Jetpack Compose Glimmer presentano alcuni vincoli unici:

  • Gli elenchi devono mostrare solo tre elementi o meno in una visualizzazione.
  • Quando un elenco contiene più elementi di quanti possano essere visualizzati in una vista, viene utilizzato un velo nero vicino ai limiti dell'elenco.

Esempio: visualizzare un elenco verticale con tre elementi

Il seguente codice mostra come utilizzare i componenti VerticalList e ListItem per creare un elenco di tre elementi:

@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")
            }
        }
    }
}

Punti chiave sul codice

  • L'elenco mostra tre elementi generati dinamicamente, ognuno dei quali è un ListItem.
  • Ogni ListItem può essere personalizzato e può essere aggiunta un'icona.