Jetpack Compose 自定义 Slider 完全指南

自定义 Compose Slider

在 Jetpack Compose 中，你可以通过多种方式自定义 Slider 组件。以下是一些常见的自定义方法：

基本自定义

var sliderPosition by remember { mutableStateOf(0f) }

Slider(
    value = sliderPosition,
    onValueChange = { sliderPosition = it },
    valueRange = 0f..100f,
    steps = 5,
    onValueChangeFinished = {
        // 滑动结束时的回调
    },
    modifier = Modifier.width(300.dp)
)

完全自定义 Slider

你可以使用 SliderDefaults 提供的组件构建完全自定义的 Slider：

@Composable
fun CustomSlider(
    value: Float,
    onValueChange: (Float) -> Unit,
    modifier: Modifier = Modifier,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    enabled: Boolean = true,
    colors: SliderColors = SliderDefaults.colors()
) {
    Box(modifier) {
        SliderDefaults.Track(
            modifier = Modifier
                .height(4.dp)
                .fillMaxWidth(),
            colors = colors,
            enabled = enabled,
            valueRange = valueRange,
            sliderPosition = value
        )
        
        SliderDefaults.Thumb(
            modifier = Modifier
                .offset {
                    IntOffset(
                        (value / valueRange.endInclusive * (modifier.width.value * 8)).toInt(),
                        0
                    )
                },
            interactionSource = remember { MutableInteractionSource() },
            colors = colors,
            enabled = enabled
        )
    }
}

自定义颜色和样式

Slider(
    value = sliderPosition,
    onValueChange = { sliderPosition = it },
    colors = SliderDefaults.colors(
        thumbColor = Color.Red,
        activeTrackColor = Color.Magenta,
        inactiveTrackColor = Color.LightGray,
        activeTickColor = Color.Green,
        inactiveTickColor = Color.DarkGray
    )
)

自定义滑块形状

Slider(
    value = sliderPosition,
    onValueChange = { sliderPosition = it },
    thumb = {
        SliderDefaults.Thumb(
            interactionSource = remember { MutableInteractionSource() },
            colors = SliderDefaults.colors(thumbColor = Color.Blue),
            modifier = Modifier
                .size(20.dp)
                .shadow(6.dp, CircleShape),
            shape = RoundedCornerShape(4.dp)
        )
    }
)

垂直滑块

var sliderPosition by remember { mutableStateOf(0f) }

Box(modifier = Modifier.height(200.dp)) {
    Slider(
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        modifier = Modifier
            .rotate(270f)
            .width(200.dp)
    )
}

自定义轨道和刻度

Slider(
    value = sliderPosition,
    onValueChange = { sliderPosition = it },
    track = { sliderPositions ->
        SliderDefaults.Track(
            modifier = Modifier.height(8.dp),
            sliderPositions = sliderPositions,
            colors = SliderDefaults.colors(
                activeTrackColor = Color(0xFF6200EE),
                inactiveTrackColor = Color(0xFFBB86FC)
            ),
            thumbShape = CircleShape,
            activeTickColor = Color.Transparent,
            inactiveTickColor = Color.Transparent
        )
    }
)

自定义滑块图标

Slider(
    value = sliderPosition,
    onValueChange = { sliderPosition = it },
    thumb = {
        Icon(
            imageVector = Icons.Default.VolumeUp,
            contentDescription = null,
            modifier = Modifier.size(24.dp),
            tint = Color.Blue
        )
    }
)

这些示例展示了如何在 Jetpack Compose 中自定义 Slider 组件。你可以根据需要组合这些自定义选项，创建完全符合你应用设计风格的滑块控件。