☰

Jetpack Compose でクリックしたときに波及効果を無効にする方法 質問する

tag-icon • tag-icon android android-jetpack android-jetpack-compose
Jetpack Compose でクリックしたときに波及効果を無効にする方法 質問する

Jetpack Compose では、clickable {}コンポーザブルの修飾子を有効にすると、デフォルトでそのコンポーザブルの波及効果が有効になります。この動作を無効にするにはどうすればよいでしょうか?

サンプルコード

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

ベストアンサー1

短い答え:
リップルパスを無効にするにnullはindicationパラメータのclickable修飾子:

val interactionSource = remember { MutableInteractionSource() }
Column {
    Text(
        text = "Click me without any ripple!",
        modifier = Modifier
            .clickable(
                interactionSource = interactionSource,
                indication = null
            ) {
                /* doSomething() */
            }
    )

一部の Composable がボタンとして機能しない理由:

Buttonやなどの一部の Composable では、が を使用するコンポーネントによって内部的に定義されているIconButtonため、 は機能しないことに注意してください。これにより、 によって提供される値を使用して が作成され、記憶されます。indicationindication = rememberRipple()RippleRippleTheme

この場合、無効にすることはできませんが、 に基づくリップルの外観を変更することはできますRippleTheme。 カスタム RippleTheme を定義し、 を使用してそれをコンポーザブルに適用できますLocalRippleTheme。

何かのようなもの：

CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
    Button(
        onClick = { /*...*/ },
    ) {
       //...
    }
}

と：

private object NoRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = Color.Unspecified

    @Composable
    override fun rippleAlpha(): RippleAlpha = RippleAlpha(0.0f,0.0f,0.0f,0.0f)
}

カスタム修飾子

上記と同じコードを使用してカスタム Modifier を構築したい場合は、以下を使用できます。

fun Modifier.clickableWithoutRipple(
    interactionSource: MutableInteractionSource,
    onClick: () -> Unit
) = composed(
    factory = {
        this.then(
            Modifier.clickable(
                interactionSource = interactionSource,
                indication = null,
                onClick = { onClick() }
            )
        )
    }
)

そしてそれを適用するだけです:

    Row(
        modifier = Modifier
            .clickableWithoutRipple(
                interactionSource = interactionSource,
                onClick = { doSomething() }
            )
    ){ 
      //Row content
    }

長い答え:
追加するとclickable修飾子境界内でクリックできるようにコンポーザブルに追加すると、Indication指示パラメータで指定されたとおり。

デフォルトでは、LocalIndication使用されます。

MaterialTheme階層内で を使用している場合、 は次Rippleのように定義されます。rememberRipple()は、やIndicationなどのコンポーネント内ではデフォルトとして使用されます。androidx.compose.foundation.clickableandroidx.compose.foundation.indication

おすすめ記事