ModifierのclickableでRipple Effect(リップルエフェクト)を無効化する

拡張関数を定義する

ModifierのclickableでRipple Effect(リップルエフェクト)を無効化したいときがある。
そのような場合に備えて以下のような拡張関数を定義しておくと便利です。

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

使い方

使い方は簡単でクリックしたいコンポーザブルのModifierにclickableNoRippleをつけるだけです。
clickableNoRippleをつけるだけでRipple Effect(リップルエフェクト)が無効化されます。

@Composable
fun SampleText() {
    val context = LocalContext.current
    Text(
        text = "SAMPLE TEXT",
        modifier = Modifier.clickableNoRipple {
            Toast.makeText(context, "Click!!", Toast.LENGTH_SHORT).show()
        }
    )
}