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 GlimmerLazyColumn funziona in modo simile a LazyColumn di Compose, componendo e disponendo solo gli elementi visibili per mantenere un rendimento elevato. Tuttavia, le colonne lazy di Glimmer sono progettate per i controlli degli occhiali con display, in cui l'utente interagisce utilizzando un touchpad anziché un touchscreen. Mentre un utente di dispositivi mobili può toccare qualsiasi coordinata su uno schermo in qualsiasi momento, un utente con occhiali con display può interagire solo con l'elemento che ha lo stato attivo.

Comportamento dello stato attivo ed elementi secondari

Le colonne lazy di Glimmer gestiscono automaticamente la navigazione basata sullo stato attivo. A differenza degli elenchi per dispositivi mobili in cui lo stato attivo e lo scorrimento sono spesso separati, una colonna lazy di Glimmer coordina i due spostando lo stato attivo 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 all'interno di una colonna lazy di Glimmer. Quando gli elementi hanno lo stato attivo, fornisci anche una risposta visiva, ad esempio un bordo attivo o un'evidenziazione. Sebbene gli utenti possano comunque scorrere gli elementi non attivabili, non possono interagire con essi. Utilizza i componenti integrati come ListItem o Card quando possibile, poiché questi componenti sono già attivabili e forniscono un feedback visivo per gli stati attivi.

Esempio: colonne lazy di Glimmer con più elementi

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

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

Esempio: colonne lazy di Glimmer con uno slot per il titolo

Jetpack Compose Glimmer fornisce anche un overload di GlimmerLazyColumn 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 una colonna lazy di Glimmer con uno slot per il titolo:

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

Utilizza lo stato dell'elenco lazy di Glimmer per le operazioni di elenco a livello di programmazione

Per controllare e osservare diversi aspetti dello stato dell'elenco, ad esempio la sua posizione di scorrimento utilizzando le proprietà firstVisibleItemIndex e firstVisibleItemScrollOffset, utilizza GlimmerLazyListState.

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