Jetpack Compose水平页面指示器不显示且无法滑动翻页问题求助

我正在学习Jetpack Compose，目前遇到问题：水平页面指示器无法显示，也无法滑动切换到下一页，仅能看到startDestination对应的初始页面。参考了stevdza-san的YouTube教程，以下是初始页面截图及相关代码：

Onboard Screen 代码 #

@ExperimentalPagerApi
@ExperimentalAnimationApi
@Composable
fun OnBoardScreen(
    navController: NavHostController,
){
    val pages = listOf(
        OnBoardingPage.First,
        OnBoardingPage.Second,
        OnBoardingPage.Third
    )
    val pagerState = rememberPagerState()

    Column(modifier = Modifier.fillMaxSize()) {
        HorizontalPager(
            modifier = Modifier.weight(10f),
            count = 3,
            state = pagerState,
            verticalAlignment = Alignment.Top
        ) { position ->
            PagerScreen(onBoardingPage = pages[position])
        }
        HorizontalPagerIndicator(
            modifier = Modifier
                .align(Alignment.CenterHorizontally)
                .weight(1f),
            pagerState = pagerState
        )
        FinishButton(
            modifier = Modifier.weight(1f),
            pagerState = pagerState
        ) {
           // welcomeViewModel.saveOnBoardingState(completed = true)
            navController.popBackStack()
            navController.navigate(Screen.Home.route)
        }
    }
}

@Composable
fun PagerScreen(onBoardingPage: OnBoardingPage) {
    Column(
        modifier = Modifier
            .fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Top
    ) {
        Image(
            modifier = Modifier
                .fillMaxWidth(0.5f)
                .fillMaxHeight(0.7f),
            painter = painterResource(id = onBoardingPage.image),
            contentDescription = "Pager Image"
        )
        Text(
            modifier = Modifier
                .fillMaxWidth(),
            text = onBoardingPage.title,
            fontSize = MaterialTheme.typography.h4.fontSize,
            fontWeight = FontWeight.Bold,
            textAlign = TextAlign.Center
        )
        Text(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 40.dp)
                .padding(top = 20.dp),
            text = onBoardingPage.description,
            fontSize = MaterialTheme.typography.subtitle1.fontSize,
            fontWeight = FontWeight.Medium,
            textAlign = TextAlign.Center
        )
    }
}

@ExperimentalAnimationApi
@ExperimentalPagerApi
@Composable
fun FinishButton(
    modifier: Modifier,
    pagerState: PagerState,
    onClick: () -> Unit
) {
    Row(
        modifier = modifier
            .padding(horizontal = 40.dp),
        verticalAlignment = Alignment.Top,
        horizontalArrangement = Arrangement.Center
    ) {
        AnimatedVisibility(
            modifier = Modifier.fillMaxWidth(),
            visible = pagerState.currentPage == 2
        ) {
            Button(
                onClick = onClick,
                colors = ButtonDefaults.buttonColors(
                    contentColor = Color.White
                )
            ) {
                Text(text = "Finish")
            }
        }
    }
}

@Composable
@Preview(showBackground = true)
fun FirstOnBoardingScreenPreview() {
    Column(modifier = Modifier.fillMaxSize()) {
        PagerScreen(onBoardingPage = OnBoardingPage.First)
    }
}

@Composable
@Preview(showBackground = true)
fun SecondOnBoardingScreenPreview() {
    Column(modifier = Modifier.fillMaxSize()) {
        PagerScreen(onBoardingPage = OnBoardingPage.Second)
    }
}

@Composable
@Preview(showBackground = true)
fun ThirdOnBoardingScreenPreview() {
    Column(modifier = Modifier.fillMaxSize()) {
        PagerScreen(onBoardingPage = OnBoardingPage.Third)
    }
}

NavGraph.kt 代码 #

@ExperimentalPagerApi
@ExperimentalAnimationApi
@Composable
fun SetUpNavGraph(
    navController: NavHostController
){
    NavHost(
        navController = navController,
        startDestination = Screen.Onboard.route
    ){
        composable(route = Screen.Onboard.route){
            OnBoardScreen(navController = navController)
        }
        composable(route = Screen.Home.route){
            HomeScreen()
        }
    }
}

1. 滑动失效核心修复 #

PagerScreen 内部的 Column 未设置 fillMaxHeight()，导致页面仅包裹内容高度，HorizontalPager 的滑动区域被压缩无法触发。修改 PagerScreen：

@Composable
fun PagerScreen(onBoardingPage: OnBoardingPage) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(), // 新增该行，让页面占满Pager可用空间
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Top
    ) {
        // 原有代码不变
    }
}

2. 指示器不显示修复 #

• 检查依赖：确保已引入 accompanist-pager-indicators 库，在 build.gradle 添加（版本需与 accompanist-pager 一致）：

implementation "com.google.accompanist:accompanist-pager-indicators:<你的版本号>"

• 调整布局：HorizontalPagerIndicator 的 weight(1f) 可能导致高度不足，替换为 padding 保证显示空间：

HorizontalPagerIndicator(
    modifier = Modifier
        .align(Alignment.CenterHorizontally)
        .padding(16.dp), // 替换weight为padding
    pagerState = pagerState
)

3. 按钮布局优化 #

FinishButton 中 Row 的 verticalAlignment = Alignment.Top 会让按钮靠上，改为垂直居中：

Row(
    modifier = modifier
        .padding(horizontal = 40.dp),
    verticalAlignment = Alignment.CenterVertically, // 修改该行
    horizontalArrangement = Arrangement.Center
) {
    // 原有代码不变
}

修改后重新运行，即可正常滑动切换页面，指示器也会正确显示。若仍有问题，检查 OnBoardingPage 的资源是否正确，以及 rememberPagerState() 与 HorizontalPager 的关联是否无误。

内容的提问来源于stack exchange，提问作者Priyanshu