单击 Jetpack Compose 时如何禁用涟漪效应

Question

在 Jetpack Compose 中，当您启用clickable {}可组合的修改器时，默认情况下它会为其启用涟漪效果。如何禁用此行为？

示例代码

Row(modifier = Modifier
         .clickable { // action }
)

Answer 1

要禁用波纹效果，必须传递null给indication修改器的属性。

有关Jetpack Compose 文档中指示的更多信息

代码

Row(
    modifier = Modifier
        .clickable(
            indication = null, 
            interactionSource = remember { MutableInteractionSource() } // This is mandatory
        ) { 
            // action
        }
)

Answer 2

使用按钮时可以这样处理。

创建Ripple 交互源类

class NoRippleInteractionSource : MutableInteractionSource {

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

override suspend fun emit(interaction: Interaction) {}

override fun tryEmit(interaction: Interaction) = true

}

如果是按钮，您可以通过将涟漪交互类作为交互源参数传递来处理它，即：

 Button(
    onClick = { /*...*/ },
    interactionSource = NoRippleInteractionSource()
) {
    //..
}

此解决方案适用于所有接受 mutableInteractionSource 作为参数的可组合项，例如Button()、TextButton()、Switch()等

当使用可点击修改器时，你可以这样做：

modifier = Modifier.clickable(
                    indication = null,
                    interactionSource = NoRippleInteractionSource()
                ) { /** todo  action here */ }

您还可以进一步修改上述答案并创建扩展函数并重新用于所有可点击的函数，即：

fun Modifier.noRippleClick(onClick:()->Unit):Modifier {
  return this.clickable(
    interactionSource = NoRippleInteractionSource(),
    indication = null
   ){ 
      onClick() 
   } 
 }

您现在可以使用扩展修饰符代替可单击修饰符，即：

modifier = modifier.noRippleClick { /** todo  action here */  }

Answer 3

如果您将clickable修饰符添加 到元素以使其在其边界内可点击，它将显示Indication指示参数中指定的 。

默认情况下，LocalIndication将使用指示 from 。

如果您在层次结构中使用 MaterialTheme，aRipple将用作Indication内部组件的默认值，例如androidx.compose.foundation.clickable和androidx.compose.foundation.indication。

通过null显示无指示：

val interactionSource = remember { MutableInteractionSource() }
Column {
    Text(
        text = "Click me and my neighbour will indicate as well!",
        modifier = Modifier
            .clickable(
                interactionSource = interactionSource,
                indication = null
            ) {
                /* .... */
            }
    )

Answer 4

使用此修饰符扩展：

inline fun Modifier.noRippleClickable(crossinline onClick: ()->Unit): Modifier = composed {
    clickable(indication = null,
        interactionSource = remember { MutableInteractionSource() }) {
        onClick()
    }
}

然后简单地替换Modifier.clickable {}为Modifier.noRippleClickable {}

Row(modifier = Modifier.noRippleClickable { // action })