以下のようなボタンを作成します。
- 四角の中がボタンが押せる範囲
- rippleは円形の中だけ
実装
clickableの引数を見れば明確で、実装時に悩むことはありませんでしたが、以下のようにします。
interactionSource
を共有し、rippleを表示させたくない範囲は indication
を null
にします。
@Preview @Composable public fun Preview() { val interactionSource = remember { MutableInteractionSource() } var count by remember { mutableStateOf(0) } Column( modifier = Modifier .padding(12.dp) .border(1.dp, color = Color.Gray, shape = RectangleShape) .clickable( indication = null, interactionSource = interactionSource, ) { count++ }, horizontalAlignment = Alignment.CenterHorizontally, ) { Icon( modifier = Modifier .size(42.dp) .clip(CircleShape) .border( width = 1.dp, color = Color.Gray, shape = CircleShape ) .clickable( indication = LocalIndication.current, interactionSource = interactionSource, ) { count++ } .padding(8.dp), imageVector = Icons.Default.Favorite, contentDescription = null, ) Text(text = "button $count") } }