Horizontale Pager in Jetpack Compose Glimmer

XR‑Geräte, für die der Leitfaden gilt
Dieser Leitfaden hilft Ihnen dabei, Erlebnisse für die folgenden Arten von XR-Geräten zu entwickeln.
Informationen zu XR‑Gerätetypen
Displaybrillen
Informationen zu XR‑Gerätetypen

In Jetpack Compose Glimmer ist GlimmerHorizontalPager ein verzögert zusammengesetztes, horizontal scrollbares Layout, in dem die Seiten sequenziell angeordnet sind. Es ähnelt dem Standard-HorizontalPager in Compose Foundation, ist aber auf Displaybrillen zugeschnitten und bietet Glimmer-Verhaltensweisen und Standardwerte.

Standardmäßig wird jeweils nur eine Seite hervorgehoben. Um eine optimale Nutzererfahrung zu bieten, verwendet der Pager Snap-Animationen, damit eine Seite nach dem Ende der Scrollbewegung eines Nutzers immer genau an den Grenzen des Darstellungsbereichs positioniert wird.

Abbildung 1. Ein Beispiel für `GlimmerHorizontalPager`.

Wichtige Parameter und Layoutoptionen

GlimmerHorizontalPager bietet anpassbare Parameter zum Steuern von Abständen, Layoutausrichtung und Lazy Loading. Einige dieser Parameter sind:

Parameter Beschreibung

state

Ein GlimmerPagerState-Objekt, das die Scrollposition und die aktive Seite des Pagers verwaltet, beobachtet und programmatisch steuert.

contentPadding

Abstand, der nach dem Zuschneiden um die Gesamtgrenzen des Inhalts angewendet wird. Er ist nützlich, um vor der ersten oder nach der letzten Seite einen Abstand am Anfang oder Ende hinzuzufügen.

pageSpacing

Der horizontale Abstand zwischen den einzelnen Seiten im Pager.

pageIndicator

Ein zusammensetzbarer Slot, der die aktive Seitenanzeige rendert. Standardmäßig GlimmerHorizontalPagerDefaults.PageIndicator(state).

beyondViewportPageCount

Die Anzahl der Seiten, die über den sichtbaren Darstellungsbereich hinaus zusammengesetzt und angeordnet werden sollen, um das Vorabladen zu optimieren. Setzen Sie keine großen Werte, um die Effizienz der verzögerten Komposition zu erhalten.

Die vollständige Referenzdokumentation enthält Informationen zu allen verfügbaren Parametern.

Empfehlung für animierte Textbewegung

Bei Snap-Animationen und Übergängen des Pagers auf Displaybrillen können bei der Standardtextwiedergabe Artefakte durch das Ausrichten an Pixeln auftreten. Wenn Sie TextMotion.Animated festlegen, wird der Text bei Layoutanimationen reibungslos gerendert:

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

Beispiel: Horizontaler Pager

Der folgende Code zeigt, wie Sie einen einfachen horizontalen Pager mit 10 Seiten erstellen, wobei auf jeder Seite eine Karte platziert wird:

// 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),
        )
    }
}

Wichtige Punkte zum Code

  • Status: Initialisiert einen GlimmerPagerState mit rememberGlimmerPagerState(pageCount = { 10 }), um den Status des Pagers zu verwalten.
  • Inhalt des Seitenslots: Empfängt den Seitenindex page in der GlimmerPagerScope-Lambda, um jede Karte zu rendern.
  • Textstil für reibungslose Animation: Kopiert LocalTextStyle.current und aktiviert explizit TextMotion.Animated.
  • Automatische Seitenanzeige: Im Gegensatz zu Standard-Compose-Pagern, die eine externe Anzeigekomponente erfordern, GlimmerHorizontalPager bettet standardmäßig automatisch eine Seitenanzeige im Punktstil ein.

Seitenanzeigen

Standardmäßig rendert GlimmerHorizontalPager eine punktbasierte Seitenanzeige mit GlimmerHorizontalPagerDefaults.PageIndicator. Die Anzeige passt das Farbschema automatisch an:

  • Der aktive Punkt verwendet die Inhaltsfarbe, die aus der nächstgelegenen umgebenden surface abgeleitet wird.

Sie können eine angepasste PageIndicator übergeben, um explizite Farben anzugeben oder den Punkt durch ein eigenes benutzerdefiniertes Layout zu ersetzen:

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),
        )
    }
)