JetPack Compose Pager 的 onPageSelected 回调答案

【问题标题】：onPageSelected callback for JetPack Compose PagerJetPack Compose Pager 的 onPageSelected 回调
【发布时间】：2021-07-25 19:27:18
【问题描述】：

我正在使用 Accompanist 的 JetPack Compose Pager，我想知道我如何确切知道我的页面何时显示在屏幕上。类似于 ViewPager 中的 onPageSelected 方法。

这是我的代码：

HorizontalPager(
        state = pagerState,
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colors.background)
    ) { page ->
         // This method reinvoked many times.

      }

'因为目前每个重组都会从 Pager 调用该回调方法。

【问题讨论】：

标签： android android-jetpack-compose jetpack-compose-accompanist

【解决方案1】：

我觉得用起来会更好

LaunchedEffect(pagerState) {
    snapshotFlow { pagerState.currentPage }.collect { page ->
        // do your stuff with selected page
    }
}

【讨论】：

要删除第一个合成中的重复状态，请使用带有“distinctUntilChanged”的流程。 snapshotFlow { pagerState.currentPage }.distinctUntilChanged().collect { page -> // 用选定的页面做你的事情 }

【解决方案2】：

要完成@ysfcyln 解决方案，这里是官方文档：

https://google.github.io/accompanist/pager/#reacting-to-page-changes

完整的例子是：

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

【讨论】：

【解决方案3】：

我们可以使用PagerState 完成我们的任务而无需任何回调。

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

【讨论】：

【解决方案4】：

使用变量来跟踪

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
      }

【讨论】：