Compose メモ : Icon + clickable より IconButton を使う

IconButton だと ripple がいい感じになります。 accesibility の処理も入っているし、ボタンの大きさが 48dp になるような指定も入っています。

上が Icon + clickable で 下が IconButton です。

view plainprint?

1. Column(modifier = Modifier.padding(16.dp)) {  
2.     Icon(  
3.         imageVector = Icons.Filled.Favorite,  
4.         contentDescription = "favorite",  
5.         modifier = Modifier  
6.             .clickable { }  
7.             .padding(12.dp)  
8.             .size(24.dp)  
9.     )  
10.   
11.     Spacer(modifier = Modifier.height(48.dp))  
12.   
13.     IconButton(onClick = { /*TODO*/ }) {  
14.         Icon(  
15.             imageVector = Icons.Filled.Favorite,  
16.             contentDescription = "favorite",  
17.             modifier = Modifier  
18.                 .size(24.dp)  
19.         )  
20.     }  
21. }  

Column(modifier = Modifier.padding(16.dp)) { Icon( imageVector = Icons.Filled.Favorite, contentDescription = "favorite", modifier = Modifier .clickable { } .padding(12.dp) .size(24.dp) ) Spacer(modifier = Modifier.height(48.dp)) IconButton(onClick = { /*TODO*/ }) { Icon( imageVector = Icons.Filled.Favorite, contentDescription = "favorite", modifier = Modifier .size(24.dp) ) } } IconButton は ripple がいい感じです。まるいし。