在 Jetpack Compose 中单击时如何禁用涟漪效应答案

【问题标题】：How to disable ripple effect when clicking in Jetpack Compose在 Jetpack Compose 中单击时如何禁用涟漪效应
【发布时间】：2021-06-16 13:59:53
【问题描述】：

在 Jetpack Compose 中，当您在可组合项的修饰符上启用 clickable {} 时，默认情况下会为其启用波纹效果。如何禁用此行为？

示例代码

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

【问题讨论】：

标签： android android-jetpack android-jetpack-compose

【解决方案1】：

简答：
在 clickable 修饰符的 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
            ) {
                /* .... */
            }
    )

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

默认情况下，将使用来自LocalIndication 的指示。

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

【讨论】：

【解决方案2】：

使用这个修饰符扩展：

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

【讨论】：

Modifier 扩展加 1。
Android Studio 显示警告 Unnecessary use of Modifier.composed。这是错误还是可以以其他方式创建？
@iknow 我不知道。在我写这个答案的时候没有任何警告。我会尽快看看。感谢您的通知。

【解决方案3】：

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

更多关于Jetpack Compose documentation的指示

代码

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

【讨论】：

我收到“找不到具有此名称的参数：指示”。我错过了什么吗？
我认为参数interactionSource 需要在列表中的indication 参数之前。

【解决方案4】：

 modifier = Modifier
        .clickable(
            enabled = enabled,
            onClick = { if (enabled) onClick() }
        )

如果您在 Column 或任何其他组件上使用修饰符可点击属性，那么您可以在需要时使用 enabled 属性和 onClick 来禁用涟漪效应。

【讨论】：