單擊 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 來禁用漣漪效應。