[Kotlin]JetpackComposeでボタンを押したときのエフェクトについて（リップルエフェクト）

概要

ボタンを押したときのエフェクトがコードの書き方によってどう変わるかを比較してみました

本文

JetpackCompose用テンプレートのコードにclickableなBoxを追加したものです。画面をタップするとリップルエフェクトが発生します。

        setContent {
            ComposeClickableTestTheme {
                Surface() {
                    Box(
                        modifier = Modifier
                            .fillMaxSize()
                            .clickable(
                                onClick = { },
                            )
                    ) {
                    }
                }
            }
        }

適用されていたThemeを消しました。clickableなBoxはリップルエフェクトを出さず単純な点滅になります。

        setContent {
            Surface() {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .clickable(
                            onClick = { },
                        )
                ) {
                }
            }
        }

Themeが無いままでも以下のように書き換えると、clickableなBoxはリップルエフェクトを発生するようになります。

        setContent {
            Surface() {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .clickable(
                            onClick = { },
                            interactionSource = remember { MutableInteractionSource() },
                            indication = rememberRipple(bounded = true),
                        ),
                ) {
                }
            }
        }