概要　

Android View の時に以下のような StateListDrawalbe xml の state_pressed で表示を切り替えて表示することがよくあった。

これを Jetpack Compose に書き換える方法のメモ。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/sugoi_button_pressed" />
    <item android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/sugoi_button" />
</selector>

こうする


val interactionSource = remember { MutableInteractionSource() }
val pressed by interactionSource.collectIsPressedAsState()

Image(
    painter = painterResource(if (pressed) R.drawable.sugoi_button_pressed else R.drawable.sugoi_button),
    contentDescription = null,
    modifier = Modifier
        .clickable(interactionSource = interactionSource, indication = null) {
            // 何か処理
        }
)

参考

https://stackoverflow.com/questions/70717310/how-to-detect-that-a-button-is-pressed-in-jetpack-compose