我们如何从jetpack compose中的切换按钮中消除涟漪效应？

Question

I have the toggle button in android jetpack compose, I want to remove ripple effect, when I click the toggle buttons. I try to find a solution on internet, but I did not find clear solution for this kind of example. Is there any idea?

   @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

From the 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.

So you can write your own MutableInteractionSource like this:

class DisabledInteractionSource : MutableInteractionSource {

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

    override suspend fun emit(interaction: Interaction) {}

    override fun tryEmit(interaction: Interaction) = true

}

And use it like this:

    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
        )
    )