[英]onPageSelected callback for JetPack Compose Pager
I am using JetPack Compose Pager from Accompanist and I'm wonder how do I know exactly when my page is Showed at screen.我正在使用 Accompanist 的 JetPack Compose Pager ,我想知道我如何确切知道我的页面何时显示在屏幕上。 Like onPageSelected method from ViewPager.就像ViewPager的 onPageSelected 方法一样。
Here is my code:这是我的代码:
HorizontalPager(
state = pagerState,
modifier = Modifier
.fillMaxSize()
.background(MaterialTheme.colors.background)
) { page ->
// This method reinvoked many times.
}
'Cause currently each recomposition would invoke that callback method from Pager.因为目前每个重组都会从寻呼机调用该回调方法。
I think it will be better to use我认为使用会更好
LaunchedEffect(pagerState) {
snapshotFlow { pagerState.currentPage }.collect { page ->
// do your stuff with selected page
}
}
Figured out!想通了! We can use LaunchedEffect to know when your page would be successfully shown.我们可以使用LaunchedEffect来了解您的页面何时会成功显示。
HorizontalPager(
state = pagerState,
modifier = Modifier.fillMaxSize()
) { page ->
LaunchedEffect(key1 = page, block = {
if (!pagerState.isScrollInProgress) {
// Here you are
}
})
}
LaunchedEffect invoked only once per key (which is current page). LaunchedEffect 每个键(即当前页面)仅调用一次。 So, with this code you can achieve onPageSelected feature.因此,使用此代码您可以实现onPageSelected功能。
Use a variable to keep track使用变量来跟踪
val trigger by remember { mutableStateOf (false) }
HorizontalPager(
state = pagerState,
modifier = Modifier
.fillMaxSize()
.background(MaterialTheme.colors.background)
) { page ->
// Shown successfully,
trigger = true //use at other places as a callback to change state
}
To complete @ysfcyln solution here is the official documentation :要完成@ysfcyln 解决方案,这里是官方文档:
https://google.github.io/accompanist/pager/#reacting-to-page-changes https://google.github.io/accompanist/pager/#reacting-to-page-changes
the full example there is :完整的例子是:
val pagerState = rememberPagerState()
LaunchedEffect(pagerState) {
// Collect from the a snapshotFlow reading the currentPage
snapshotFlow { pagerState.currentPage }.collect { page ->
AnalyticsService.sendPageSelectedEvent(page)
}
}
VerticalPager(
count = 10,
state = pagerState,
) { page ->
Text(text = "Page: $page")
}
We can do our tasks without any callbacks using PagerState<\/code> .
我们可以使用
PagerState<\/code>完成我们的任务而无需任何回调。
val pagerState = rememberPagerState(pageCount = list.size)
HorizontalPager(state = pagerState) { page ->
// Our page content
CardItemView(page, list[page])
}
// Do your tasks based on the current page selected using pagerState.currentPage
Toast.makeText(
LocalContext.current,
"Page selected ${pagerState.currentPage}",
Toast.LENGTH_SHORT
).show()
This is a solution simpler than the one from the official documentation这是一个比官方文档中的解决方案更简单的解决方案
LaunchedEffect(pagerState.currentPage) {
// do your stuff with pagerState.currentPage
}
Here is my solution which worked quite well for me.这是我的解决方案,对我来说效果很好。 Extra thing with in it was "distinctUntilChanged"其中的额外内容是“distinctUntilChanged”
LaunchedEffect(pagerState) {
snapshotFlow {
pagerState.currentPage
}.distinctUntilChanged().collect { page ->
// Now you can use selected page
onPageChangeListener.invoke(page)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.