在 Slider Jetpack compose 中更改拇指的圆形形状

Question

Jetpack Compose 中的滑块允许更改拇指的颜色，但不能更改形状。我正在寻找将拇指形状从圆形更改为矩形的解决方案，如附图所示

我尝试将Slider.kt文件添加到项目中，如此处所述，但奇怪的是，当我将此代码复制到项目中时，出现了很多错误，请参阅随附的屏幕截图

Answer 1

使用M3， androidx.compose.material3.Slider您可以使用该thumb属性来使用自定义拇指。

您可以使用 simpleSpacer或 aBox来获取 Rectangle：

var sliderPosition by remember { mutableStateOf(0f) }
val interactionSource = MutableInteractionSource()

Column {
    Text(text = sliderPosition.toString())

    Slider(
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        valueRange = 0f..5f,
        steps = 4,
        interactionSource = interactionSource,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
        },
        thumb = {
            val shape = RectangleShape 
            Spacer(
                modifier = Modifier
                    .size(20.dp)
                    .indication(
                        interactionSource = interactionSource,
                        indication = rememberRipple(
                            bounded = false,
                            radius = 20.dp
                        )
                    )
                    .hoverable(interactionSource = interactionSource)
                    .shadow(if (enabled) 6.dp else 0.dp, shape, clip = false)
                    .background(Red, shape)
            )
        },
    )
}

注意：至少需要material3版本1.0.0-beta03