如何通过可组合的 HorizontalPager 的按钮单击操作来同步滑动和滚动

Question

我正在使用 jetpack 组成 HorizontalPager 创建一个应用程序。可以使用按钮并通过翻页来滚动寻呼机。当使用按钮单击滚动寻呼机时，我执行了额外的操作，例如记录当前页面索引，如下面的代码所示。但翻阅页面时不会记录该消息。我想知道如何在翻阅页面时执行额外的操作，以与使用按钮滚动时发生的情况同步。 这是我的代码

    private const val TAG = "TAGG"

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PagerDemo(){
    
    val scope = rememberCoroutineScope()
    val state = rememberPagerState{5}

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Center
        ) {
            Button(onClick = {
                scope.launch{
                    state.scrollToPage(state.currentPage - 1)
                    Log.d(TAG, "${state.currentPage}")
                }

            }) {
                Text(text = "Backward")
            }
            Spacer(modifier = Modifier.width(12.dp))
            Button(onClick = {
                scope.launch{
                    state.scrollToPage(state.currentPage + 1)
                    Log.d(TAG, "${state.currentPage}")
                }

            }) {
                Text(text = "Forward")
            }
        }

        HorizontalPager(
            state = state,
            key = {state.currentPage},
            pageSize = PageSize.Fill,
        ){
            Box(
                modifier = Modifier.fillMaxSize()
                    .background(Color.Cyan),
                contentAlignment = Alignment.Center,
            ){
                Text(
                    text = "$it",
                    fontSize = 64.sp,
                    fontWeight = FontWeight.Bold,
                    textAlign = TextAlign.Center,
                )
            }
        }


    }
}

谢谢

Answer 1

您可以尝试使用

LaunchedEffect

。它允许在关键变量发生变化时触发副作用。对于您的情况，您可以尝试像这样使用它：

val state = rememberPagerState{5}
LaunchedEffect(state.settledPage) {
    Log.d(TAG, "${state.currentPage}")
}

我们正在从 [settledPage

 观察 

PagerState][3] 属性。它代表当前固定页面的索引，即任何滚动动画完成后页面的索引。每当

settledPage

发生变化时，

LaunchedEffect

就会被执行。如果以编程方式触发滚动或通过滑动手势触发滚动，就会发生这种情况。

如果您想在滚动动画可能仍在进行时打印日志，请改用

currentPage

。