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 Grenzen des Gesamtinhalts angewendet wird. Er ist nützlich, um vor der ersten Seite 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. Der Standardwert ist GlimmerHorizontalPagerDefaults.PageIndicator(state).

beyondViewportPageCount

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

In der vollständigen Referenzdokumentation finden Sie 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 Pixel-Snapping auftreten. Wenn Sie TextMotion.Animated festlegen, wird der Text bei allen 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 und auf jeder Seite eine Karte platzieren:

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