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

Posted 2023-04-13

【中文标题】在 Jetpack Compose 中单击时如何禁用涟漪效应

【英文标题】：How to disable ripple effect when clicking in Jetpack Compose

【发布时间】：2021-06-16 13:59:53

【问题描述】：

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

示例代码

Row(modifier = Modifier
         .clickable  // action 
)

【参考方案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 来禁用涟漪效应。