在 Jetpack Compose 中实现具有分页功能的惰性垂直分页器

问题描述 投票:0回答:1

我们已经实现了大部分功能,并尝试同时使用 LazyColumn 和 VerticalPager,我们的问题从这里开始:

  1. 使用lazyColumn工作及其通过工作中的分页动态获取数据,但它没有为我们提供所需的交互和滚动动画效果的UI,因此我们开始使用VerticalPager。
  2. 正如我提到的,VerticalPager 为我们提供了所需的分页效果,但它不适用于分页,我们看到当我们运行应用程序时,应用程序的该部分会加载数据库中的所有数据(我们有 30 个文档和分页逻辑)是一次获取 5 个项目,当我们在结束之前达到 2 个项目时,我们应该再获取 5 个项目,这样我们总共将有 10 个…依此类推),我们得出的结论是 VerticalPager 不是一个惰性组件,并且我我不确定。
现在我们希望具有具有惰性行为的垂直寻呼机交互,这样我们就可以使分页逻辑正常工作,并使 UI 交互像 Instagram 卷轴和 Youtube 短片一样工作,我们如何实现这一目标?或者更好的是我们如何修改我们的代码来做到这一点?

这是我们的代码片段以及我们已经尝试过的内容:

我们的 Lazy Column 可以分页,但 UI 交互不是我们想要的

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) } } }
我们的垂直寻呼机具有与寻呼机一样的正确 UI 滚动效果,但从我们的 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 的视频播放器.

非常感谢任何帮助。

我添加了两个视频作为更好的上下文,第一个视频显示了垂直寻呼机以及我们需要的 UI 交互,第二个视频是包含视频的lazyColumn,但是当我们向下拖动视频时,整个 UI 都会刷新。

  1. 垂直寻呼机:

    https://drive.google.com/file/d/1234FiQuqSKowp7wK5kjjJ5dFgfps_pPc/view?usp=sharing

  2. LazyColumn:

    https://drive.google.com/file/d/15Jdl1lfMYZtH7C-wxIB4sVpcZ3iYriI7/view?usp=sharing

android firebase kotlin android-jetpack-compose wordpress-jetpack
1个回答
0
投票
我有同样的问题垂直分页器不支持像典型的惰性列那样分页?尝试使用寻呼机和视频分页项目来实现类似 YouTube 的短片?你解决了吗?

© www.soinside.com 2019 - 2024. All rights reserved.