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 →

Scopri di più sui tipi di dispositivi XR →

In Jetpack Compose Glimmer, the VerticalList funziona in modo simile a un Compose LazyColumn componendo e disponendo solo gli elementi visibili per mantenere prestazioni elevate. Tuttavia, per Jetpack Compose Glimmer, gli elenchi verticali sono creati per i controlli dei display glasses, in cui l'utente interagisce utilizzando un touchpad anziché un touchscreen. Mentre un utente mobile può toccare qualsiasi coordinata su uno schermo in qualsiasi momento, un utente con display glasses può interagire solo con l'elemento che ha lo stato attivo.

Comportamento dello stato attivo ed elementi secondari

Gli elenchi verticali sono ottimizzati per gestire automaticamente la navigazione basata sullo stato attivo. A differenza degli elenchi per dispositivi mobili in cui la selezione e lo scorrimento sono spesso separati, un elenco verticale orchestra i due spostando la selezione tra gli elementi secondari mentre l'utente scorre con il touchpad. L'elenco stesso non è attivabile, quindi gestisce e richiede lo stato attivo per i suoi elementi secondari in modo che l'utente abbia un punto di interazione chiaro durante lo scorrimento.

Poiché non è presente alcun input tattile diretto, rendi attivabili tutti gli elementi secondari che inserisci in un elenco verticale e fornisci una risposta visiva quando gli elementi hanno lo stato attivo, ad esempio un bordo attivo o un'evidenziazione. Anche se gli utenti possono comunque scorrere gli elementi non attivabili, non possono interagire con essi. Quando possibile, utilizza componenti integrati come ListItem o Card all'interno degli elenchi verticali, poiché questi componenti sono già attivabili e forniscono un feedback visivo per gli stati attivi.

Esempio: elenco verticale con più elementi

Il seguente codice mostra come utilizzare un elenco verticale con i metodi DSL item e items per creare un elenco di elementi:

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

Esempio: elenco verticale con uno slot per il titolo

Jetpack Compose Glimmer fornisce anche un overload dell'elenco verticale che contiene uno slot per il titolo. Il titolo non attivabile (in genere un TitleChip) rimane statico nella parte superiore centrale, mentre i contenuti dell'elenco scorrono sotto di esso.

Il seguente codice crea un elenco verticale con uno slot per il titolo:

@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

Utilizzare lo stato dell'elenco per le operazioni di elenco programmatiche

Utilizza ListState per controllare e osservare diversi aspetti dello stato dell'elenco, ad esempio la posizione di scorrimento utilizzando le proprietà firstVisibleItemIndex e firstVisibleItemScrollOffset.

Puoi sollevare questo stato utilizzando rememberListState per scorrere a livello di programmazione utilizzando scrollToItem e animateScrollToItem.