如何在Jetpack Compose中自定义带滑动按钮的四阶段进度条

针对你的需求，这里提供完整的实现方案，支持左右滑动调整进度（步长0.25），同时保留按钮控制功能：

@Composable
fun CustomSegmentedProgressBar() {
    val step = 0.25f
    var progress by remember { mutableStateOf(0.25f) }
    var barWidth by remember { mutableStateOf(0f) }

    Column(modifier = Modifier.padding(16.dp)) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Box(
                modifier = Modifier
                    .weight(1f)
                    .height(16.dp)
                    .background(Color.LightGray)
                    .onSizeChanged { barWidth = it.width.toFloat() }
                    .pointerInput(Unit) {
                        detectDragGestures { change, dragAmount ->
                            change.consume()
                            val progressDelta = dragAmount.x / barWidth
                            var newProgress = progress + progressDelta
                            newProgress = newProgress.coerceIn(0f, 1f)
                            progress = roundToStep(newProgress, step)
                        }
                    }
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth(progress)
                        .height(16.dp)
                        .background(Color(0xFF2196F3)) // 替换为你的DefaultDYTColor
                )
                // 可选：添加滑块指示器，提升交互直观性
                Box(
                    modifier = Modifier
                        .align(Alignment.CenterEnd)
                        .offset(x = (-8).dp)
                        .size(24.dp)
                        .background(Color.White, CircleShape)
                        .border(2.dp, Color.Gray, CircleShape)
                )
            }

            Spacer(modifier = Modifier.width(8.dp))

            Button(
                onClick = { progress -= step },
                enabled = progress > 0f
            ) {
                Text("-")
            }

            Spacer(modifier = Modifier.width(8.dp))

            Button(
                onClick = { progress += step },
                enabled = progress < 1f
            ) {
                Text("+")
            }
        }

        Text(
            text = String.format("%.2f", progress),
            modifier = Modifier.align(Alignment.CenterHorizontally),
            fontSize = 16.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

private fun roundToStep(value: Float, step: Float): Float {
    return kotlin.math.round(value / step) * step
}

关键实现说明： #

• 滑动交互：通过pointerInput监听拖动手势，将水平拖动距离转换为进度变化量，确保滑动时进度平滑切换到对应分段。
• 步长对齐：roundToStep函数将计算后的进度自动对齐到0.25的倍数，保证进度始终处于0、0.25、0.5、0.75、1这几个有效值。
• 边界控制：用coerceIn限制进度在0-1范围内，同时按钮根据当前进度自动禁用（比如进度为0时无法点击减少按钮）。
• 直观反馈：添加了圆形滑块指示器，让用户更清晰地看到当前进度位置。

原代码问题分析： #

你的初始代码仅实现了点击增加按钮的逻辑，缺少滑动手势处理和减少进度的功能，因此无法实现滑动调整进度的需求。

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