我们已经实现了大部分功能,并尝试同时使用 LazyColumn 和 VerticalPager,我们的问题从这里开始:
这是我们的代码片段以及我们已经尝试过的内容:
我们的 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 都会刷新。