Jetpack Compose自定义进度条：如何让文字标签居中对齐对应圆点

你当前的问题源于将圆点（或图标）与文字拆分为两个独立的Row布局，依赖Arrangement.SpaceAround和weight(1f)分配空间，当文字长度不一致时，会导致视觉偏移。正确的做法是将每个步骤的圆点/图标与文字封装为一个独立的Column单元，确保两者天然居中对齐。

修改后的完整代码 #

data class Step(val title: String = "") {}

StepsProgressView(
    steps = listOf(Step("text"),Step("something"),Step("some"),Step("DD"),Step("Ssss cccc")),
    completedIndex = 2
)

@Composable
fun StepsProgressView(
    steps: List<Step>,
    modifier: Modifier = Modifier,
    lineWidth: Dp = 1.dp,
    completedIndex: Int = 2
) {
    Column(modifier = modifier) {
        Box(contentAlignment = Alignment.Center) {
            // 保留原Canvas绘制进度条线条逻辑
            Canvas(modifier = Modifier.fillMaxWidth()) {
                val width = drawContext.size.width
                val height = drawContext.size.height

                val yOffset = height / 2
                val itemWidth = width / steps.size

                var startOffset = itemWidth / 2
                var endOffset = startOffset

                val barWidth = lineWidth.toPx()
                repeat(steps.size - 1) { index ->
                    endOffset += itemWidth

                    drawLine(
                        brush = SolidColor(if (index < completedIndex) Color.Blue else Color.Gray),
                        start = Offset(startOffset, yOffset),
                        end = Offset(endOffset, yOffset),
                        strokeWidth = barWidth
                    )
                    startOffset = endOffset
                }
            }

            // 合并圆点/图标与文字的布局：每个步骤为一个独立Column
            Row(
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically
            ) {
                steps.forEachIndexed { index, step ->
                    Column(
                        modifier = Modifier.weight(1f),
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        // 绘制圆点或图标
                        if (index == steps.lastIndex) {
                            Image(
                                painter = painterResource(id = androidx.biometric.R.drawable.fingerprint_dialog_fp_icon),
                                contentDescription = null,
                                modifier = Modifier.size(24.dp),
                                contentScale = ContentScale.Crop
                            )
                        } else {
                            Box(
                                modifier = Modifier
                                    .size(12.dp)
                                    .drawBehind {
                                        drawCircle(
                                            color = if (index <= completedIndex) Color.Blue else Color.Gray
                                        )
                                    }
                            )
                        }
                        // 文字标签与圆点/图标同属一个Column，天然居中对齐
                        Spacer(modifier = Modifier.height(8.dp))
                        Text(
                            text = step.title,
                            style = TextStyle(
                                color = if (index <= completedIndex) Color.Blue else Color.Gray,
                                fontSize = 13.sp,
                                textAlign = TextAlign.Center
                            ),
                            modifier = Modifier.wrapContentWidth()
                        )
                    }
                }
            }
        }
    }
}

关键修改说明 #

• 合并布局单元：每个步骤的视觉元素（圆点/图标+文字）放在同一个Column中，通过horizontalAlignment = Alignment.CenterHorizontally确保文字精准对齐到圆点正下方。
• 均匀分配空间：外层Row给每个Column添加weight(1f)，确保所有步骤单元占据相等宽度，避免因文字长度不同导致的布局偏移。
• 简化结构：移除了原有的两个独立Row和中间的Spacer，让布局结构更紧凑，逻辑更清晰。

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