Miejsca podziału na strony w poziomie w Jetpack Compose Glimmer

Odpowiednie urządzenia z XR
Ten przewodnik pomoże 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 GlimmerHorizontalPager to układ z leniwym komponowaniem i przewijaniem w poziomie, który rozmieszcza strony sekwencyjnie. Jest on podobny do standardowego HorizontalPager w Compose Foundation, ale dostosowany do okularów z wyświetlaczem z zachowaniami i wartościami domyślnymi Glimmer.

Domyślnie tylko jedna strona jest wyświetlana w widocznym miejscu. Aby zapewnić dopracowane wrażenia, pager używa animacji przyciągania, dzięki czemu strona zawsze dokładnie dopasowuje się do granic widocznego obszaru po zakończeniu gestu przewijania użytkownika.

Rysunek 1. Przykład GlimmerHorizontalPager.

Kluczowe parametry i opcje układu

Element GlimmerHorizontalPager udostępnia konfigurowalne parametry, które pozwalają kontrolować odstępy, wyrównanie układu i leniwe ładowanie. Oto niektóre z tych parametrów:

Parametr Opis

state

Obiekt GlimmerPagerState, który zarządza pozycją przewijania i aktywną stroną pagera, obserwuje je i programowo kontroluje.

contentPadding

Dopełnienie stosowane wokół ogólnych granic treści po przycięciu. Przydatne do dodawania dopełnienia przed pierwszą stroną lub po ostatniej stronie.

pageSpacing

Odstęp poziomy między poszczególnymi stronami w pagerze.

pageIndicator

Slot z możliwością komponowania, który renderuje wskaźnik aktywnej strony. Domyślnie jest to GlimmerHorizontalPagerDefaults.PageIndicator(state).

beyondViewportPageCount

Liczba stron do skomponowania i ułożenia poza widocznym obszarem jako optymalizacja wstępnego wczytywania. Aby zachować wydajność leniwego komponowania, unikaj ustawiania dużych wartości.

Informacje o wszystkich dostępnych parametrach znajdziesz w pełnej dokumentacji.

Zalecenie dotyczące animacji tekstu

Podczas animacji przyciągania i przejść w pagerze na okularach z wyświetlaczem domyślne renderowanie tekstu może powodować artefakty przyciągania pikseli. Ustawienie TextMotion.Animated zapewnia płynne renderowanie podczas animacji układu:

Text(
    text = "Page: $page",
    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
)

Przykład: pager poziomy

Poniższy kod pokazuje, jak utworzyć podstawowy pager poziomy z 10 stronami, umieszczając kartę na każdej stronie:

// Hoist the pager state, specifying the total page count with a lambda.
val pagerState = rememberGlimmerPagerState(pageCount = { 10 })

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
) { page ->
    // Use Glimmer components like Card and Text for optimized glasses styling.
    Card(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Page: $page",
            // Recommended: use TextMotion.Animated for smooth transitions in a pager.
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
}

Najważniejsze informacje o kodzie

  • Stan: inicjuje GlimmerPagerState za pomocą rememberGlimmerPagerState(pageCount = { 10 }) aby zarządzać stanem pagera.
  • Zawartość slotu strony: otrzymuje indeks strony page w lambdzie GlimmerPagerScope, aby renderować każdą kartę.
  • Styl tekstu z płynną animacją: kopiuje LocalTextStyle.current i wyraźnie włącza TextMotion.Animated.
  • Automatyczny wskaźnik strony: w przeciwieństwie do standardowych pagerów Compose, które wymagają zewnętrznego komponentu wskaźnika, GlimmerHorizontalPager domyślnie automatycznie osadza wskaźnik strony w stylu kropek.

Wskaźniki strony

Domyślnie GlimmerHorizontalPager renderuje wskaźnik strony oparty na kropkach za pomocą GlimmerHorizontalPagerDefaults.PageIndicator. Wskaźnik automatycznie dostosowuje schemat kolorów:

  • Aktywna kropka używa koloru treści określonego na podstawie najbliższego otaczającego elementu surface.

Możesz przekazać dostosowany element PageIndicator, aby określić wyraźne kolory, lub zastąpić kropkę własnym układem niestandardowym:

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
    // Use a page numbers instead of the default dot-indicator
    pageIndicator = {
        Text(
            text = "${pagerState.currentPage + 1} / ${pagerState.pageCount}",
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
)