Pager in der Funktion „Schreiben“

Mit den Composables HorizontalPager und VerticalPager kannst du Inhalte nach links und rechts oder nach oben und unten durchbl�ttern. Diese zusammensetzbaren Funktionen haben �hnliche Funktionen wie ViewPager in der Ansicht System. Standardm��ig nimmt HorizontalPager die volle Breite des Bildschirms ein. VerticalPager nimmt die gesamte H�he ein und die Pager schlagen jeweils nur eine Seite auf. . Diese Standardeinstellungen sind konfigurierbar.

HorizontalPager

Wenn Sie einen Bildlauf erstellen m�chten, der horizontal nach links und rechts scrollt, verwenden Sie HorizontalPager:

Abbildung 1: Demo von HorizontalPager

// Display 10 items
val pagerState = rememberPagerState(pageCount = {
    10
})
HorizontalPager(state = pagerState) { page ->
    // Our page content
    Text(
        text = "Page: $page",
        modifier = Modifier.fillMaxWidth()
    )
}
PagerSnippets.kt

VerticalPager

Verwenden Sie VerticalPager, um einen Pager zu erstellen, der nach oben und unten scrollt:

Abbildung 2: Demo von VerticalPager

// Display 10 items
val pagerState = rememberPagerState(pageCount = {
    10
})
VerticalPager(state = pagerState) { page ->
    // Our page content
    Text(
        text = "Page: $page",
        modifier = Modifier.fillMaxWidth()
    )
}
PagerSnippets.kt

Verz�gerte Erstellung

Seiten in HorizontalPager und VerticalPager werden lazily komponiert und bei Bedarf layoutet. Wenn der Nutzer durch die Seiten scrollt, werden alle Seiten entfernt, die nicht mehr erforderlich sind.

Mehr Seiten im Hintergrund laden

Standardm��ig werden auf dem Pager nur die sichtbaren Seiten auf dem Bildschirm geladen. So laden Sie weitere Seiten nicht zu sehen sein, stellen Sie beyondBoundsPageCount auf einen Wert gr��er null ein.

Zu einem Element auf der Seite scrollen

Um im Pager zu einer bestimmten Seite zu scrollen, erstellen Sie PagerState mithilfe von rememberPagerState() und �bergeben Sie ihn als state-Parameter an den Pager. Sie k�nnen PagerState#scrollToPage() f�r diesen Status in CoroutineScope:

val pagerState = rememberPagerState(pageCount = {
    10
})
HorizontalPager(state = pagerState) { page ->
    // Our page content
    Text(
        text = "Page: $page",
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
    )
}

// scroll to page
val coroutineScope = rememberCoroutineScope()
Button(onClick = {
    coroutineScope.launch {
        // Call scroll to on pagerState
        pagerState.scrollToPage(5)
    }
}, modifier = Modifier.align(Alignment.BottomCenter)) {
    Text("Jump to Page 5")
}
PagerSnippets.kt

Wenn Sie die Seite animieren m�chten, verwenden Sie die Methode PagerState#animateScrollToPage() :

val pagerState = rememberPagerState(pageCount = {
    10
})

HorizontalPager(state = pagerState) { page ->
    // Our page content
    Text(
        text = "Page: $page",
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
    )
}

// scroll to page
val coroutineScope = rememberCoroutineScope()
Button(onClick = {
    coroutineScope.launch {
        // Call scroll to on pagerState
        pagerState.animateScrollToPage(5)
    }
}, modifier = Modifier.align(Alignment.BottomCenter)) {
    Text("Jump to Page 5")
}
PagerSnippets.kt

Benachrichtigungen zu �nderungen des Seitenstatus erhalten

PagerState hat drei Properties mit Informationen zu Seiten: currentPage, settledPage und targetPage.

  • currentPage: Die Seite, die der Anlegeposition am n�chsten ist. Standardm��ig befindet sich die Anlegeposition am Anfang des Layouts.
  • settledPage: Die Seitenzahl, wenn keine Animation oder kein Scrollen ausgef�hrt wird. Dieses unterscheidet sich von der Eigenschaft currentPage insofern, als die currentPage wird sofort aktualisiert, wenn die Seite nah genug an der Andockposition ist, settledPage bleibt gleich, bis alle Animationen ausgef�hrt wurden.
  • targetPage: Die vorgeschlagene Stoppposition f�r eine Scrollbewegung.

Mit der Funktion snapshotFlow k�nnen Sie �nderungen an diesen Variablen beobachten und darauf reagieren. Wenn Sie beispielsweise ein Analytics-Ereignis bei jeder Seiten�nderung senden m�chten, k�nnen Sie Folgendes tun:

val pagerState = rememberPagerState(pageCount = {
    10
})

LaunchedEffect(pagerState) {
    // Collect from the a snapshotFlow reading the currentPage
    snapshotFlow { pagerState.currentPage }.collect { page ->
        // Do something with each page change, for example:
        // viewModel.sendPageSelectedEvent(page)
        Log.d("Page change", "Page changed to $page")
    }
}

VerticalPager(
    state = pagerState,
) { page ->
    Text(text = "Page: $page")
}
PagerSnippets.kt

Seitenwechsel hinzuf�gen

Wenn Sie einer Seite einen Indikator hinzuf�gen m�chten, verwenden Sie das PagerState-Objekt, um Informationen dazu zu erhalten, welche Seite aus der Anzahl der Seiten ausgew�hlt ist, und zeichnen Sie Ihren benutzerdefinierten Indikator.

Wenn Sie beispielsweise einen einfachen Kreisindikator ben�tigen, k�nnen Sie die Anzahl der Kreise wiederholen und die Kreisfarbe mithilfe von pagerState.currentPage �ndern, je nachdem, ob die Seite ausgew�hlt ist:

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize()
) { page ->
    // Our page content
    Text(
        text = "Page: $page",
    )
}
Row(
    Modifier
        .wrapContentHeight()
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .padding(bottom = 8.dp),
    horizontalArrangement = Arrangement.Center
) {
    repeat(pagerState.pageCount) { iteration ->
        val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray
        Box(
            modifier = Modifier
                .padding(2.dp)
                .clip(CircleShape)
                .background(color)
                .size(16.dp)
        )
    }
}
PagerSnippets.kt

Ein Bildlauf-Widget mit einem Kreissymbol unter dem Inhalt
Abbildung 3: Ein Vorleseger�t mit einem Kreissymbol unter dem Inhalt

Scrolleffekte von Elementen auf Inhalte anwenden

Ein h�ufiger Anwendungsfall ist die Verwendung der Scrollposition, um Effekte auf Ihren Pager anzuwenden. Elemente. Mit PagerState.currentPageOffsetFraction k�nnen Sie herausfinden, wie weit eine Seite von der aktuell ausgew�hlten Seite entfernt ist. Sie k�nnen dann Transformationseffekte auf Ihre Inhalte anwenden, die sich an der Entfernung von der ausgew�hlten Seite orientieren.

Abbildung�4. Transformationen auf Pager-Inhalte anwenden

Wenn Sie beispielsweise die Deckkraft von Elementen abh�ngig davon anpassen m�chten, wie weit sie vom �ndern Sie den alpha mit Modifier.graphicsLayer f�r ein Element innerhalb des Pagers:

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(state = pagerState) { page ->
    Card(
        Modifier
            .size(200.dp)
            .graphicsLayer {
                // Calculate the absolute offset for the current page from the
                // scroll position. We use the absolute value which allows us to mirror
                // any effects for both directions
                val pageOffset = (
                    (pagerState.currentPage - page) + pagerState
                        .currentPageOffsetFraction
                    ).absoluteValue

                // We animate the alpha, between 50% and 100%
                alpha = lerp(
                    start = 0.5f,
                    stop = 1f,
                    fraction = 1f - pageOffset.coerceIn(0f, 1f)
                )
            }
    ) {
        // Card content
    }
}
PagerSnippets.kt

Benutzerdefinierte Seitenformate

Standardm��ig nehmen HorizontalPager und VerticalPager die volle Breite oder volle H�he erreicht. Sie k�nnen die Variable pageSize entweder auf Fixed, Fill (Standard) oder eine benutzerdefinierte Gr��enberechnung festlegen.

So legen Sie beispielsweise eine Seite mit fester Breite von 100.dp fest:

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    pageSize = PageSize.Fixed(100.dp)
) { page ->
    // page content
}
PagerSnippets.kt

Wenn Sie die Seitengr��e anhand der Darstellungsgr��e festlegen m�chten, verwenden Sie eine benutzerdefinierte Berechnung der Seitengr��e. Benutzerdefinierten PageSize und teile availableSpace durch drei, wobei der Abstand ber�cksichtigt wird zwischen den Elementen:

private val threePagesPerViewport = object : PageSize {
    override fun Density.calculateMainAxisPageSize(
        availableSpace: Int,
        pageSpacing: Int
    ): Int {
        return (availableSpace - 2 * pageSpacing) / 3
    }
}
PagerSnippets.kt

Textabstand

Bei HorizontalPager und VerticalPager kann der Abstand f�r den Inhalt ge�ndert werden, mit der Sie die maximale Gr��e und Ausrichtung von Seiten beeinflussen k�nnen.

Wenn Sie beispielsweise den Abstand start festlegen, werden die Seiten am Ende ausgerichtet:

Seitenleiste mit Anfangsabstand, bei dem die Inhalte nach unten ausgerichtet sind

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    contentPadding = PaddingValues(start = 64.dp),
) { page ->
    // page content
}
PagerSnippets.kt

Wenn Sie sowohl f�r den start- als auch f�r den end-Abstand denselben Wert festlegen, wird das Element horizontal zentriert:

Pager mit einem Abstand an Anfang und Ende, bei dem der Inhalt in der Mitte angezeigt wird

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    contentPadding = PaddingValues(horizontal = 32.dp),
) { page ->
    // page content
}
PagerSnippets.kt

Wenn Sie den end-Abstand festlegen, werden die Seiten am Anfang ausgerichtet:

Seitenleiste mit Anfangs- und Endabstand, die den Inhalt am Anfang ausrichtet

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    contentPadding = PaddingValues(end = 64.dp),
) { page ->
    // page content
}
PagerSnippets.kt

Sie k�nnen die Werte top und bottom festlegen, um �hnliche Effekte f�r Folgendes zu erzielen: VerticalPager Der Wert 32.dp wird hier nur als Beispiel verwendet. Sie k�nnen jede der Abst�nde auf einen beliebigen Wert festlegen.

Scrollverhalten anpassen

Die Standard-Composables HorizontalPager und VerticalPager geben an, wie Scrollgesten mit dem Pager funktionieren. Sie k�nnen die Standardeinstellungen wie pagerSnapDistance oder flingBehavior jedoch anpassen und �ndern.

Snap-Abstand

Standardm��ig legen HorizontalPager und VerticalPager die maximale Anzahl von Seiten fest, die mit einer Wischgeste jeweils �bersprungen werden k�nnen. Wenn Sie das �ndern m�chten, legen Sie auf der flingBehavior die Option pagerSnapDistance fest:

val pagerState = rememberPagerState(pageCount = { 10 })

val fling = PagerDefaults.flingBehavior(
    state = pagerState,
    pagerSnapDistance = PagerSnapDistance.atMost(10)
)

Column(modifier = Modifier.fillMaxSize()) {
    HorizontalPager(
        state = pagerState,
        pageSize = PageSize.Fixed(200.dp),
        beyondViewportPageCount = 10,
        flingBehavior = fling
    ) {
        PagerSampleItem(page = it)
    }
}
PagerSnippets.kt

Zur�ck
Liste der Modifikatoren
Weiter
Flow-Layouts