Реализация ленивого вертикального пейджера с нумерацией страниц в Jetpack Compose ⇐ Android

[Anonymous]

Мы реализовали большинство функций и попытались использовать как LazyColumn, так и Upper-Pager, наша проблема начинается здесь:

• использование работы lazyColumn и ее выборка данные динамически обрабатываются с разбиением на страницы, но это не дает нам желаемого пользовательского интерфейса для взаимодействия и эффекта анимации прокрутки, поэтому мы начали использовать Вертикальный пейджер.
• VerticalPager, как я уже упоминал, дает нам желаемый эффект разбиения на страницы , но он не работает с нумерацией страниц, мы видим, что когда мы запускаем наше приложение, этот раздел приложения загружает все данные из нашей базы данных (у нас есть 30 документов, и наша логика нумерации страниц заключается в получении 5 элементов за раз, когда мы достигнем 2 элементов до конца, мы должны получить еще 5 элементов, чтобы в общей сложности их было 10... и так далее), мы пришли к выводу, что ВертикальныйPager не является ленивым компонентом, и я в этом не уверен.

Теперь мы хотим иметь вертикальное взаимодействие пейджера с ленивым поведением, чтобы мы могли иметь как логику нумерации страниц для правильной работы, так и взаимодействие пользовательского интерфейса для работы в качестве роликов Instagram и коротких видеороликов YouTube. , как мы можем этого добиться? или лучше, как мы можем изменить наш код, чтобы сделать это?
Вот фрагмент нашего кода и то, что мы уже пробовали:
Наша ленивая колонка где нумерация страниц работает, но взаимодействие с пользовательским интерфейсом — это не то, что нам нужно

Код: Выделить всё

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

Наш вертикальный пейджер, который имеет правильный эффект прокрутки пользовательского интерфейса, как пейджер, но загружает все данные из нашей Firebase.

Код: Выделить всё

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

Примечание. Мы стремимся создать макет барабанов Instagram, в котором каждая ячейка будет отображать портретное видео. Когда эта ячейка появляется, мы воспроизводим видео этой ячейки, а когда оно исчезает, мы больше не воспроизводим его. видео, что касается видеоплеера, мы использовали ExoPlayer.
Любая помощь будет очень признательна.
Я добавил два видео для лучшего контекста: первое видео, показывающее вертикальный пейджер с необходимым взаимодействием пользовательского интерфейса, второй – это lazyColumn, в котором есть видео, но когда мы перетаскиваем видео вниз, весь пользовательский интерфейс обновляется.

• Вертикальный пейджер: https://drive.google.com/file/d/1234FiQ ... sp=sharing
• LazyColumn: https://drive.google.com/file/d/15Jdl1l ... sp=sharing

Подробнее здесь: https://stackoverflow.com/questions/782 ... ck-compose