单击 Jetpack Compose 时如何禁用波纹效果

Question

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

示例代码

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

Answer 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修饰符添加到元素以使其在其边界内可点击，它将显示Indication参数中指定的指示。

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

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

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

Answer 3

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

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

代码

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

Answer 4

带有其他参数的修饰符扩展：

inline fun Modifier.noRippleClickable(
        enabled: Boolean = true,
        onClickLabel: String? = null,
        role: Role? = null,
        crossinline onClick: ()->Unit
    ): Modifier = composed {
        clickable(
            enabled = enabled,
            indication = null,
            onClickLabel = onClickLabel,
            role = role,
            interactionSource = remember { MutableInteractionSource() }) {
            onClick()
        }
    }

Answer 5

我使用@Mahdi-Malv 的答案并修改如下：

• 删除内联和交叉内联
• 根据我的要求修改

fun Modifier.noRippleClickable( interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, indication: Indication? = null, enabled: Boolean = true, onClickLabel: String? = null, role: Role? = null, onClick: () -> Unit, ) = clickable( interactionSource = interactionSource, indication = indication, enabled = enabled, onClickLabel = onClickLabel, role = role, onClick = onClick, )

Answer 6

---

使用 Buttons 时可以这样处理。

创建Ripple 交互源 class

class NoRippleInteractionSource : MutableInteractionSource {

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

override suspend fun emit(interaction: Interaction) {}

override fun tryEmit(interaction: Interaction) = true

}

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

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

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

Answer 7

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

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