Stosy pionowe w Jetpack Compose Glimmer

Odpowiednie urządzenia z XR
Te wskazówki pomogą Ci tworzyć aplikacje na te typy urządzeń z XR.
Więcej informacji o typach urządzeń z XR →
Okulary z wyświetlaczem
Więcej informacji o typach urządzeń z XR →

W Jetpack Compose Glimmer VerticalStack to leniwy układ z możliwością przewijania w pionie, który rozmieszcza elementy w wizualnie nakładającej się sekwencji trójwymiarowej. Główny element jest wyraźnie wyświetlany na pierwszym planie, a kolejne elementy są umieszczane za nim.

Rysunek 1. Przykład różnych stylów stosów w Jetpack Compose Glimmer.

Zachowania związane z przewijaniem i pozycjonowaniem

Ponieważ stosy utrzymują elementy w kompaktowym, nakładającym się układzie, mają pewne zachowania, które różnią się od innych typów komponentów sekwencyjnych, takich jak listy:

  • Gdy użytkownik przewija w pionie, aktywny element na pierwszym planie znika z widoku, co pozwala elementowi znajdującemu się bezpośrednio pod nim przesunąć się na widoczną pozycję na pierwszym planie.
  • Po zakończeniu gestu użytkownika elementy zawsze animują się do pozycji na pierwszym planie za pomocą specjalnej animacji sprężynowej.
  • Elementy są umieszczane wzdłuż osi z, przy czym elementy znajdujące się dalej na liście są umieszczane za elementem głównym.

Zarządzanie skupieniem uwagi

Element VerticalStack używa specjalnego systemu skupienia uwagi, aby zapewnić, że bieżący element na pierwszym planie jest zawsze głównym celem interakcji z użytkownikiem:

  • Początkowe skupienie uwagi i ponowne wejście: początkowe skupienie uwagi i ponowne wejście skupienia uwagi jest kierowane na bieżący element na górze stosu.
  • Powiadomienie o automatycznym skupieniu uwagi: gdy elementy przechodzą, stos żąda skupienia uwagi na elemencie na górze.
  • Śledzenie skupienia uwagi: każdy element używa onFocusChanged, aby powiadomić StackState o swoim indywidualnym stanie skupienia uwagi.

Przykład: tworzenie stosu pionowego

Poniższy kod tworzy stos pionowy z kilkoma elementami karty:

@Composable
fun VerticalStackSample() {
    VerticalStack {
        item {
            Card { Text("Top Card") }
        }
        item {
            Card { Text("Second Card") }
        }
        item {
            Card { Text("Third Card") }
        }
    }
}