Jetpack Compose : Modifier.toggleable() で独自チェックボックスを作る

Modifier.toggleable() を使います。

view plainprint?

1. var checked by remember { mutableStateOf(false) }  
2.   
3. Box(  
4.     contentAlignment = Alignment.Center,  
5.     modifier = Modifier  
6.         .toggleable(  
7.             value = checked,  
8.             onValueChange = { checked = it }  
9.         )  
10.         .size(48.dp)  
11. ) {  
12.     Icon(  
13.         imageVector = if (checked) Icons.Default.Favorite else Icons.Default.FavoriteBorder,  
14.         contentDescription = if (checked) "favorite on" else "favorite off",  
15.     )  
16. }  

var checked by remember { mutableStateOf(false) } Box( contentAlignment = Alignment.Center, modifier = Modifier .toggleable( value = checked, onValueChange = { checked = it } ) .size(48.dp) ) { Icon( imageVector = if (checked) Icons.Default.Favorite else Icons.Default.FavoriteBorder, contentDescription = if (checked) "favorite on" else "favorite off", ) } Box + Modifier.toggleable() 部分は IconToggleButton として用意されているので、それを使うこともできます。

view plainprint?

1. var checked by remember { mutableStateOf(false) }  
2.   
3. IconToggleButton(  
4.     checked = checked,  
5.     onCheckedChange = { checked = it },  
6. ) {  
7.     Icon(  
8.         imageVector = if (checked) Icons.Default.Favorite else Icons.Default.FavoriteBorder,  
9.         contentDescription = if (checked) "favorite on" else "favorite off",  
10.     )  
11. }  

var checked by remember { mutableStateOf(false) } IconToggleButton( checked = checked, onCheckedChange = { checked = it }, ) { Icon( imageVector = if (checked) Icons.Default.Favorite else Icons.Default.FavoriteBorder, contentDescription = if (checked) "favorite on" else "favorite off", ) }