【Jetpack Compose】タップ位置と違う場所にRipple Effect（Indication）を適用する

以下のようにタイトル・画像は両方タップできるけど、Rippleは画像のみに適用したい、とします

実装

interactionSourceをタップ対象のコンポーネントの親に定義し、それらを共有すると実現できます。

@Composable
internal fun IndicationExample(
  modifier: Modifier = Modifier,
) {
+ val interactionSource = remember { MutableInteractionSource() }
  var selected by remember { mutableStateOf(false) }

  Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.spacedBy(4.dp),
    modifier = modifier
      .clickable(
        onClick = { selected = !selected },
+       indication = null,
+       interactionSource = interactionSource,
      )
  ) {
    Box(
      contentAlignment = Alignment.Center,
      modifier = Modifier
          .clip(RoundedCornerShape(4.dp))
          .background(Color.LightGray)
+         .indication(indication = LocalIndication.current, interactionSource = interactionSource)
          .size(96.dp)
          .border(
              width = 2.dp,
              color = if (selected) MaterialTheme.colorScheme.primary else Color.Transparent,
              shape = RoundedCornerShape(4.dp),
          ),
    ) {
      Text("画像")
    }
    Text(
      text = "タイトル",
      textAlign = TextAlign.Center,
    )
  }
}