看不到水平页面指示器答案

【问题标题】：Not able to see horizontal page indicator看不到水平页面指示器
【发布时间】：2022-09-30 14:36:26
【问题描述】：

我开始学习jetpack compose，目前卡在我无法看到水平页面指示器并且也无法滑动到下一页的那一刻。只有 startDestination 的屏幕是可见的。

我已经从 stevdza-san youtube 频道提到了这个

这是第一个屏幕。

板载屏幕

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

导航图.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()
        }
    }
}

标签： android kotlin android-jetpack-compose android-jetpack android-jetpack-navigation

【解决方案1】：

您可以将伴奏库用于带有指示器的水平寻呼机。如果您想学习如何制作带有指示器的 OnBoarding 屏幕，可以查看此example。也可以使用this link，查看示例代码。

编辑：示例代码 https://gist.github.com/aticiadem/5b50151f540cbac5bae827f85d555ebe

【讨论】：

我也遵循了同样的事情，代码中是否有任何错误？
你能删除你的重量代码吗？你的代码没问题，但你看不到你的指标，因为 HorizontalPager(weight = 10f) 可能占据了整个页面。给出所有元素的高度以尝试检查是否可以看到指示器。
我删除了重量代码，但它不起作用。同样的问题
嗨，我正在分享我过去使用的代码。您可以根据需要更改或删除其中的一些。我希望这个对你有用。