Implementierung eines Lazy Vertical Pager mit Paginierung in Jetpack Compose ⇐ Android

[Anonymous]

Wir haben die meisten Funktionen implementiert und versucht, sowohl LazyColumn als auch VerticalPager zu verwenden. Unser Problem beginnt hier:

• Die Verwendung von lazyColumn und das dynamische Abrufen der Daten mit der Paginierung in Arbeit, aber es gibt uns nicht die gewünschte Benutzeroberfläche für Interaktion und Scroll-Animationseffekt, also haben wir mit der Verwendung von VerticalPager begonnen.
• VerticalPager gibt uns, wie ich bereits erwähnt habe, den gewünschten Paging-Effekt. Aber es funktioniert nicht mit der Paginierung. Wir sehen, dass, wenn wir unsere App ausführen, dieser Abschnitt der App alle Daten aus unserer Datenbank lädt (wir haben 30 Dokumente und unsere Paginierungslogik besteht darin, jeweils 5 Elemente abzurufen. Wenn wir vor dem Ende 2 Elemente erreichen, sollten wir 5 weitere Elemente abrufen, sodass wir insgesamt 10 haben ... und so weiter). Wir sind zu dem Schluss gekommen, dass VerticalPager keine Lazy-Komponente ist, und da bin ich mir nicht sicher.

Jetzt möchten wir die vertikale Pager-Interaktion mit dem Lazy-Verhalten haben, damit sowohl die Paginierungslogik korrekt funktioniert als auch die UI-Interaktion als Instagram-Reels und YouTube-Kurzfilme funktioniert. Wie können wir das erreichen? Oder besser: Wie können wir unseren Code ändern, um das zu erreichen?
Hier ist ein Ausschnitt unseres Codes und was wir bereits versucht haben:
Unsere Lazy Column, deren Paginierung funktioniert, aber die UI-Interaktion ist nicht das, was wir wollen

Code: Select all

LazyColumn(
modifier = Modifier
.padding(innerPadding)
.fillMaxSize()
) {
items(pagingVideo.itemCount) { index ->
val news = pagingVideo[index]!!
Box(
Modifier
.padding(20.dp)
.fillMaxWidth()
.height(200.dp)
.background(Color.Red),
contentAlignment = Alignment.Center,
) {
Text(text = news.blinkID)
}
}
}

Unser vertikaler Pager, der den richtigen UI-Scrolleffekt wie ein Pager hat, aber alle Daten aus unserer Firebase lädt

Code: Select all

    val pagingVideo = state.videos.collectAsLazyPagingItems()
val refresh = pagingVideo.loadState.refresh
val append = pagingVideo.loadState.append

LaunchedEffect(Unit) {
pagingVideo.refresh()
}

LaunchedEffect(state.currentPosition) {
interactionListener.updateSliderPosition(state.currentPosition)
}

val pagerState = rememberPagerState(
initialPage = 0,
initialPageOffsetFraction = 0f
) { pagingVideo.itemCount }

val fling = PagerDefaults.flingBehavior(
state = pagerState, lowVelocityAnimationSpec = tween(
easing = LinearEasing, durationMillis = 300
)
)

VerticalPager(
state = pagerState,
modifier = Modifier
.background(black)
.fillMaxSize()
.padding(innerPadding),
horizontalAlignment = Alignment.CenterHorizontally,
flingBehavior = fling,
beyondBoundsPageCount = 0,
key = { index ->
pagingVideo[index]?.blinkID?.let { id ->
if (id.isNotEmpty()) "$id-$index" else "$index"
} ?: "$index"
}
) { pagerIndex ->

val blinks = pagingVideo[pagerIndex]!!

Box(
modifier = Modifier.fillMaxSize()
) {
VideoPlayer(
blinks,
interactionListener,
pagerState,
pagerIndex,
editPlayer = { exoPlayer = it }
)

AnimatedVisibility(
visible = state.pauseButton,
enter = scaleIn(
spring(Spring.DampingRatioMediumBouncy),
initialScale = 1.3f
),
exit = scaleOut(tween(150)),
modifier = Modifier.align(Alignment.Center)
) {
Icon(
painter = painterResource(R.drawable.ic_blink_play),
contentDescription = null,
tint = Color.Unspecified,
modifier = Modifier.size(36.dp)
)
}
}
}
}

pagingVideo.loadState.apply {
when {
refresh is LoadState.Loading -> LoadingProgressBar()
refresh is LoadState.Error -> print(refresh)
append is LoadState.Loading -> {
LoadingProgressBar()
Log.d(TAG, "BlinksScreenContent: ${pagingVideo.itemCount}")
}

append is LoadState.Error -> print(append)
}
}

Hinweis: Unser Ziel ist es, das Instagram-Reel-Layout zu erstellen, bei dem in jeder Zelle ein Porträtvideo angezeigt wird. Wenn diese Zelle erscheint, spielen wir dieses Zellenvideo ab, und wenn sie verschwindet, spielen wir dieses Video nicht mehr ab, wie für den Videoplayer, den wir ExoPlayer verwendet haben.
Jede Hilfe ist sehr willkommen.
Ich habe zwei Videos als besseren Kontext hinzugefügt, das erste Video zeigt den vertikalen Pager mit der von uns benötigten UI-Interaktion, das zweite ist das lazyColumn, die die Videos enthält, aber wenn wir das Video nach unten ziehen, wird die gesamte Benutzeroberfläche aktualisiert.

• Vertikaler Pager: https://drive.google.com/file/d/1234FiQ ... sp=sharing
• LazyColumn: https://drive.google.com/file/d/15Jdl1l ... sp=sharing