Stack verticali 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, VerticalStack è un layout a scorrimento verticale lazy che dispone gli elementi in una sequenza tridimensionale visivamente sovrapposta. L'elemento principale viene visualizzato in primo piano, mentre gli elementi successivi vengono posizionati dietro.

Comportamenti di scorrimento e posizionamento

Poiché gli stack mantengono gli elementi disposti in un layout compatto e sovrapposto, hanno alcuni comportamenti diversi da altri tipi di componenti in sequenza, come gli elenchi:

• Quando un utente scorre verticalmente, l'elemento in primo piano attivo esce dalla visualizzazione, consentendo all'elemento immediatamente sottostante di scorrere nella posizione di primo piano in evidenza.
• Gli elementi vengono sempre animati con un'animazione di snap utilizzando un'animazione con effetto molla specializzata nella posizione di primo piano al termine del gesto di un utente.
• Gli elementi sono posizionati lungo l'asse z, con gli elementi più in basso nell'elenco posizionati dietro l'elemento principale.

Gestione del focus

VerticalStack utilizza un sistema di focus specializzato per garantire che l'elemento in primo piano corrente sia sempre il target principale per l'interazione dell'utente:

• Focus iniziale e rientro: il focus iniziale e il rientro del focus vanno all' elemento principale corrente dello stack.
• Notifica di messa a fuoco automatica: quando gli elementi cambiano, lo stack richiede il focus per l'elemento principale.
• Monitoraggio del focus: ogni elemento utilizza onFocusChanged per notificare a StackState il proprio stato di focus individuale.

Esempio: creare uno stack verticale

Il seguente codice crea uno stack verticale con diversi elementi:

@Composable
fun VerticalStackSample() {
    VerticalStack(modifier = Modifier.fillMaxWidth().height(364.dp)) {
        item(key = 0) {
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-0",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
        items(count = 10, key = { it + 1 }) { index ->
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-${index + 1}",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
    }
}
StackSamples.kt

Punti chiave sul codice

• Imposta textMotion per LocalTextStyle del testo su Animated. In questo modo, il rendering del testo è uniforme durante le animazioni del layout o le transizioni di scalabilità per evitare artefatti di pixel-snapping.
• Fornisce una dimensione specifica di 364.dp per l'altezza dello stack verticale. Fornisci sempre un'altezza specifica, utilizza un modificatore di altezza o applica il fillMaxSize modificatore per definire l'area visiva per le transizioni delle schede.
• A differenza di altri componenti che accettano direttamente un parametro di forma, VerticalStack gestisce i limiti visivi dei suoi elementi utilizzando il itemDecoration modificatore. Questo esempio passa la stessa forma per itemDecoration dell'elemento iniziale come tutti gli elementi secondari per mantenere effetti visivi e di ritaglio coerenti. Questo esempio utilizza predefinito CardDefaults.shape.