如何使用Android Jetpack Compose实现引导页步进进度条

核心思路 #

把静态图片替换为动态根据当前页面状态渲染的组件，通过当前页面索引控制每个步骤圆圈和线条的样式，导航时更新索引即可同步进度条状态。

实现步骤 #

1. 定义页面状态
   用mutableIntStateOf记录当前页面索引（0对应第一屏，4对应第五屏），确保状态变化时Compose能自动重组UI。

2. 封装进度条组件
   创建可复用的OnboardingProgressBar组件，接收当前页面索引作为参数，动态判断每个步骤的样式：

• 已完成的步骤（索引 < 当前页面）：显示带对勾的绿色圆圈
• 当前步骤（索引 == 当前页面）：显示指定样式的圆圈
• 未完成的步骤（索引 > 当前页面）：显示白色圆圈
• 已完成步骤之间的线条：显示绿色，未完成的显示白色

3. 绑定导航逻辑
   页面切换时更新当前索引，返回时递减索引，进度条会自动同步状态。

完整代码示例 #

@Composable
fun OnboardingScreen() {
    // 当前页面索引，0-4对应5个引导页
    val currentPage = remember { mutableIntStateOf(0) }
    val totalPages = 5

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // 进度条组件
        OnboardingProgressBar(currentPage = currentPage.intValue, totalPages = totalPages)

        // 页面内容（示例）
        Text(text = "第${currentPage.intValue + 1}个引导页", fontSize = 20.sp)

        // 导航按钮
        Row(
            modifier = Modifier.padding(top = 32.dp),
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Button(
                onClick = { if (currentPage.intValue > 0) currentPage.intValue-- },
                enabled = currentPage.intValue > 0
            ) {
                Text("返回")
            }
            Button(
                onClick = { if (currentPage.intValue < totalPages - 1) currentPage.intValue++ },
                enabled = currentPage.intValue < totalPages - 1
            ) {
                Text("下一步")
            }
        }
    }
}

@Composable
fun OnboardingProgressBar(currentPage: Int, totalPages: Int) {
    Row(
        horizontalArrangement = Arrangement.spacedBy((-15).dp),
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .width(327.dp)
            .height(15.dp)
            .padding(start = 18.dp, end = 15.dp)
    ) {
        // 遍历所有步骤
        for (i in 0 until totalPages) {
            // 渲染当前步骤的圆圈
            when {
                i < currentPage -> {
                    // 已完成：带对勾的绿色圆圈
                    Image(
                        painter = painterResource(id = R.drawable.completed_indicator),
                        contentDescription = "已完成步骤"
                    )
                }
                i == currentPage -> {
                    // 当前步骤：指定样式的圆圈
                    Image(
                        painter = painterResource(id = R.drawable.indicator),
                        contentDescription = "当前步骤"
                    )
                }
                else -> {
                    // 未完成：白色圆圈
                    Image(
                        painter = painterResource(id = R.drawable.stepcircle),
                        contentDescription = "未完成步骤"
                    )
                }
            }

            // 渲染步骤之间的线条（最后一个步骤后不渲染线条）
            if (i < totalPages - 1) {
                val lineDrawable = if (i < currentPage) {
                    // 已完成步骤之间的绿色线条
                    R.drawable.green_line
                } else {
                    // 未完成的白色线条
                    R.drawable.line
                }
                Image(
                    painter = painterResource(id = lineDrawable),
                    contentDescription = null
                )
            }
        }
    }
}

关键说明 #

• 确保你有对应的资源文件：completed_indicator（带对勾的绿圈）、green_line（绿色线条），如果没有可以用Compose的Canvas绘制替代图片，避免依赖资源文件。
• 状态管理用mutableIntStateOf是因为Compose 1.4+推荐使用这种可观察状态，确保UI能及时响应变化。
• 组件的间距和尺寸保持和你原代码一致，确保视觉效果匹配需求。

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