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

Question

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

示例代码

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

Answer 1

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

有关 Jetpack Compose documentation

上指示的更多信息

代码

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

Answer 2

简答:
在 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 to the element to make it clickable within its bounds it will show an Indication。

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

如果您在层次结构中使用 MaterialTheme，Ripple 将用作 androidx.compose.foundation.clickable 和 [=21= 等组件内的默认 Indication ].

Answer 3

使用此修饰符扩展：

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 4

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

如果您在 Column 或任何其他组件上使用修饰符 clickable 属性，则可以在需要时将 enabled 属性与 onClick 一起使用以禁用涟漪效应。

Answer 5

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

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

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

How to disable ripple effect when clicking in Jetpack Compose

android

android-jetpack

android-jetpack-compose