為什么入職按鈕在 Jetpack Compose 中不起作用？

Question

我是 Jetpack Compose 的新手，我正在嘗試學習它，所以我在 Jetpack Compose 中有簡單的入職屏幕，當我將項目更新到 Jetpack Compose 1.1.1 時，“下一步”按鈕不適用於入職屏幕水平滾動。 當我使用 jetpack compose 1.0.0 版本時它正在工作，我不知道新版本有什么變化，知道嗎？

 @ExperimentalPagerApi
@Composable
fun OnBoardScreen() {
    val scaffoldState = rememberScaffoldState()
    val onBoardViewModel : OnBoardViewModel = viewModel()
    val context = LocalContext.current
    val currentPage = onBoardViewModel.currentPage.collectAsState()

    Toast.makeText(context, "${currentPage.value}", Toast.LENGTH_SHORT).show()

    val pagerState = rememberPagerState(
        pageCount = onBoardItem.size,
        initialOffscreenLimit = 2,
        initialPage = 0,
        infiniteLoop = false
    )

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        scaffoldState = scaffoldState
    ) {
        Surface(
            modifier = Modifier.fillMaxSize()
        ) {
            LaunchedEffect(scaffoldState.snackbarHostState){
                pagerState.animateScrollToPage(
                    page = currentPage.value
                )
            }

            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Gray200)
            ) {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    HorizontalPager(
                        state = pagerState
                    ) { page ->
                        Column(
                            modifier = Modifier
                                .padding(top = 65.dp)
                                .fillMaxWidth(),
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {
                            Image(
                                painter = painterResource(id = onBoardItem[page].image),
                                contentDescription = "OnBoardImage",
                                modifier = Modifier
                                    .size(250.dp)
                            )

                            Text(
                                text = onBoardItem[page].title,
                                modifier = Modifier
                                    .padding(top = 50.dp),
                                color = Color.White,
                                fontWeight = FontWeight.Bold,
                                fontSize = 20.sp
                            )

                            Text(
                                text = onBoardItem[page].desc,
                                modifier = Modifier
                                    .padding(30.dp),
                                color = Color.White,
                                fontSize = 18.sp,
                                textAlign = TextAlign.Center
                            )
                        }
                    }

                    PagerIndicator(onBoardItem.size, pagerState.currentPage)
                }

                Box(
                    modifier = Modifier
                        .align(Alignment.BottomCenter)
                ) {
                    Row(
                        modifier = Modifier
                            .padding(bottom = 20.dp)
                            .fillMaxWidth(),
                        horizontalArrangement = if (pagerState.currentPage != 2 ) {
                            Arrangement.SpaceBetween
                        } else {
                            Arrangement.Center
                        }
                    ) {
                        if (pagerState.currentPage == 2) {
                            OutlinedButton(
                                onClick = {
                                    Toast.makeText(context, "Start the Screen", Toast.LENGTH_SHORT).show()
                                },
                                shape = RoundedCornerShape(45.dp)
                            ) {
                                Text(
                                    text = "Get Started",
                                    modifier = Modifier.padding(
                                        vertical = 8.dp,
                                        horizontal = 40.dp
                                    ),
                                    color = Color.Black
                                )
                            }
                        } else {
                            Text(
                                text = "Skip",
                                color = Color.White,
                                modifier = Modifier.padding(start = 20.dp),
                                fontSize = 18.sp,
                                fontWeight = FontWeight.Medium
                            )

                            Text(
                                text = "Next",
                                color = Color.White,
                                modifier = Modifier
                                    .clickable {
                                        onBoardViewModel.setCurrentPage(pagerState.currentPage + 1)
                                    }
                                    .padding(end = 20.dp),
                                fontSize = 18.sp,
                                fontWeight = FontWeight.Medium
                            )
                        }
                    }
                }
            }
        }
    }
}

Answer 1

每次更改currentPage的值時，您都希望這些行滾動尋呼機：

LaunchedEffect(scaffoldState.snackbarHostState) {
    pagerState.animateScrollToPage(
        page = currentPage.value
    )
}

但是這個 scope 中的scaffoldState.snackbarHostState是一個 static 的值，這意味着LaunchedEffect不會被重新啟動。

一種選擇是改為傳遞currentPage ，而且，由於您的currentPage由流支持，因此收集它更干凈：

LaunchedEffect(Unit) {
    onBoardViewModel.currentPage
        .collect {
            pagerState.animateScrollToPage(
                page = currentPage.value
            )
        }
}

ps另外，當你需要制作一個文本按鈕時，你可以使用TextButton而不是向Text添加clickable的：

TextButton(
    onClick = {
        
    }
) {
    Text(/*...*/)
}