Jetpack Compose中拖动Slider时如何去除拖拽触发的波纹效果

解决方案 #

你想要移除的浅紫色圆形是Material组件默认的拖拽/按压波纹效果，仅传入MutableInteractionSource无法关闭该效果，需要配合禁用组件的默认指示（Indication）配置，有两种常用实现方式：

方案1：作用域内禁用波纹（最简单） #

通过CompositionLocalProvider临时覆盖当前Slider范围内的Indication配置为null，即可直接关闭默认波纹效果：

var sliderWeight by remember { mutableStateOf(0f) }
Text(text = sliderWeight.toString())
CompositionLocalProvider(
    LocalIndication provides null
) {
    Slider(
        value = sliderWeight,
        onValueChange = { sliderWeight = it },
        interactionSource = remember { MutableInteractionSource() }
    )
}

方案2：自定义滑块（灵活度更高，适配高版本Compose） #

如果你使用的Compose Material版本 >= 1.3.0，可以通过thumb参数自定义滑块，完全自主控制滑块的样式和交互效果，不需要修改全局配置：

var sliderWeight by remember { mutableStateOf(0f) }
val interactionSource = remember { MutableInteractionSource() }
Text(text = sliderWeight.toString())
Slider(
    value = sliderWeight,
    onValueChange = { sliderWeight = it },
    interactionSource = interactionSource,
    // 自定义和默认样式一致的滑块，无波纹效果
    thumb = {
        Surface(
            shape = CircleShape,
            color = MaterialTheme.colors.primary,
            modifier = Modifier.size(20.dp)
        ) {}
    }
)

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