我们如何从 Jetpack Compose 中的切换按钮中移除涟漪效应？

Question

我在 android jetpack compose 中有切换按钮，我想在单击切换按钮时消除涟漪效应。我试图在互联网上找到解决方案，但我没有找到针对此类示例的明确解决方案。有什么想法吗？

   @Composable
 fun MainScreen() {

Column(
    modifier = Modifier
        .fillMaxSize(),


  ) {
  
        var selected by remember { mutableStateOf(false)}

        MainRow(
            name = "name1",
            change = selected, onCheckedChange = {
                selected = it

            }))}}}
        
@Composable
fun MainRow(
name: String,
change:Boolean,
onCheckedChange: (Boolean) -> Unit

 ) {

 Row(
    modifier = Modifier
        .padding(8.dp)
        .fillMaxWidth(),

    horizontalArrangement = Arrangement.SpaceBetween

) {

    Text(
        text = name,
       
    )

        Switch(
            modifier = Modifier
                .scale(1f),
            checked = change,
          
            onCheckedChange = onCheckedChange,
            colors = SwitchDefaults.colors(
                checkedThumbColor = Color.Red,
                uncheckedThumbColor = Color.Green,
                checkedTrackColor = Color.Yellow,
                uncheckedTrackColor = Color.Blue
            ))}

Answer 1

来自documentation：

interactionSource - the MutableInteractionSource representing the stream of Interactions for this Switch. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this Switch in different Interactions.

所以你可以这样写你自己的 MutableInteractionSource:

class DisabledInteractionSource : MutableInteractionSource {

    override val interactions: Flow<Interaction> = emptyFlow()

    override suspend fun emit(interaction: Interaction) {}

    override fun tryEmit(interaction: Interaction) = true

}

并像这样使用它：

    Switch(
        modifier = Modifier
            .scale(1f),
        checked = change,
        interactionSource = remember { DisabledInteractionSource() },
        onCheckedChange = onCheckedChange,
        colors = SwitchDefaults.colors(
            checkedThumbColor = Color.Red,
            uncheckedThumbColor = Color.Green,
            checkedTrackColor = Color.Yellow,
            uncheckedTrackColor = Color.Blue
        )
    )

我们如何从 Jetpack Compose 中的切换按钮中移除涟漪效应？

How we can remove ripple effect from toggle button in jetpack compose?

android

kotlin

android-togglebutton

android-jetpack-compose