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 →

Więcej informacji o typach urządzeń z XR →

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

Zachowania związane z przewijaniem i pozycjonowaniem

Stosy utrzymują elementy w kompaktowym, nakładającym się układzie, dlatego 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 użytkownika:

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

Przykład: tworzenie stosu pionowego

Poniższy kod tworzy stos pionowy z kilkoma elementami:

@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

Najważniejsze informacje o kodzie

• Ustawia textMotion dla LocalTextStyle tekstu na Animated. Zapewnia to płynne renderowanie tekstu podczas animacji układu lub przejść skalowania, aby zapobiec artefaktom przyciągania pikseli.
• Określa konkretny rozmiar 364.dp dla wysokości stosu pionowego. Zawsze podawaj konkretną wysokość, używaj modyfikatora wysokości lub zastosuj modyfikator fillMaxSize, aby zdefiniować obszar wizualny dla przejść kart.
• W przeciwieństwie do innych komponentów, które bezpośrednio przyjmują parametr kształtu, VerticalStack zarządza wizualnymi granicami swoich elementów za pomocą itemDecoration modyfikatora. W tym przykładzie przekazywany jest ten sam kształt dla itemDecoration elementu początkowego co dla wszystkich elementów podrzędnych, aby zachować spójne przycinanie i efekty wizualne. W tym przykładzie użyto domyślnego CardDefaults.shape.