Android Compose 自定义滑动进度条

androidx.compose.material3 我用1.2.0版本的Slider非常好用，但是升级到1.3.2后滑轨后面多了个点，滑块背景也移除不掉而且默认透明了我暂时没有找到让他不透明。所以自定义了一个先用着。

@Composable
fun CustomSlider(state: CustomSliderState,modifier: Modifier = Modifier,trackHeight: Dp = 4.dp,thumbSize: Dp = 24.dp,trackColor: Color = Color.Gray,progressColor: Color = Color.Blue,thumbColor: Color = Color.White,onValueChange: ((Float) -> Unit)? = null,onValueChangeFinished: ((Float) -> Unit)? = null
) {var sliderWidth by remember { mutableFloatStateOf(0f) }Box(modifier = modifier.height(thumbSize + 16.dp) // 确保足够高度容纳滑块.pointerInput(Unit) {awaitEachGesture {val event = awaitPointerEvent(PointerEventPass.Initial)if (event.changes.firstOrNull()?.changedToDown() == true) {val down = awaitFirstDown(requireUnconsumed = true)state.setPressed(true)val newPosition = (event.changes.first().position.x / sliderWidth).coerceIn(0f, 1f)val newValue = state.range.start + newPosition * (state.range.endInclusive - state.range.start)state.updateValue(newValue)onValueChange?.invoke(state.value)var drag: PointerInputChange?do {drag = awaitTouchSlopOrCancellation(down.id) { change, _ ->if (change.positionChange() != Offset.Zero) change.consume()}} while (drag != null && !drag.isConsumed)if (drag != null) {val dragResult = drag(drag.id) {val newPosition = (it.position.x / sliderWidth).coerceIn(0f, 1f)val newValue = state.range.start + newPosition * (state.range.endInclusive - state.range.start)state.updateValue(newValue)onValueChange?.invoke(state.value)}// 确保完成回调被触发if (!dragResult || drag.isConsumed) {onValueChangeFinished?.invoke(state.value)}} else {onValueChangeFinished?.invoke(state.value)}}}},contentAlignment = Alignment.CenterStart) {// 绘制轨道（Track）Canvas(modifier = Modifier.fillMaxWidth().clip(CircleShape).height(trackHeight).align(Alignment.CenterStart).onSizeChanged { size ->sliderWidth = size.width.toFloat()}) {// 背景轨道drawRect(color = trackColor,size = Size(size.width.toFloat(), trackHeight.toPx()))// 进度轨道drawRect(color = progressColor,size = Size(width = (state.value - state.range.start) / (state.range.endInclusive - state.range.start) * size.width,height = trackHeight.toPx()))}// 滑块（Thumb）根据你自己需求替换Box(modifier = Modifier.offset {IntOffset(x = ((state.value - state.range.start) / (state.range.endInclusive - state.range.start) * sliderWidth - thumbSize.toPx()/2).toInt(),y = 0)}.shadow(4.dp, CircleShape).size(thumbSize).background(thumbColor, CircleShape))}
}class CustomSliderState(initialValue: Float,internal val range: ClosedFloatingPointRange<Float> = 0f..1f
) {private val _value = mutableFloatStateOf(initialValue.coerceIn(range))private val _isPressed = mutableStateOf(false) // 新增按下状态val value: Floatget() = _value.floatValueval isPressed: Boolean // 暴露给外部get() = _isPressed.valuefun updateValue(newValue: Float) {_value.floatValue = newValue.coerceIn(range)}fun setPressed(pressed: Boolean) { // 更新按下状态_isPressed.value = pressed}
}@Composable
fun rememberCustomSliderState(initialValue: Float = 0f,range: ClosedFloatingPointRange<Float> = 0f..1f
): CustomSliderState {return remember { CustomSliderState(initialValue, range) }
}

 使用

 val sliderState = rememberCustomSliderState(initialValue = 0.5f,range = 0f..100f)CustomSlider(state = sliderState,modifier = Modifier.fillMaxWidth().padding(horizontal = 36.dp),trackHeight = 12.dp,thumbSize = 24.dp,trackColor = Color.LightGray,progressColor = Color(0xFF6200EE),thumbColor = Color.White,onValueChange = {Log.e("onValueChange","float---$it")},onValueChangeFinished = {Log.e("onValueChangeFinished","float---$it")})