Jetpack Compose : Modifier.triStateToggleable() で3状態ボタンを作る

Modifier.triStateToggleable() を使った3状態チェックボックスとして TriStateCheckbox が用意されています。

view plainprint?

1. var state by remember { mutableStateOf(ToggleableState.On) }  
2.   
3. TriStateCheckbox(state = state, onClick = {  
4.     state = when (state) {  
5.         ToggleableState.On -> ToggleableState.Indeterminate  
6.         ToggleableState.Indeterminate -> ToggleableState.Off  
7.         ToggleableState.Off -> ToggleableState.On  
8.     }  
9. })  

var state by remember { mutableStateOf(ToggleableState.On) } TriStateCheckbox(state = state, onClick = { state = when (state) { ToggleableState.On -> ToggleableState.Indeterminate ToggleableState.Indeterminate -> ToggleableState.Off ToggleableState.Off -> ToggleableState.On } })

Modifier.triStateToggleable() を使って独自の3状態ボタンも作ることができます。

view plainprint?

1. var state by remember { mutableStateOf(ToggleableState.On) }  
2.   
3. Box(  
4.     contentAlignment = Alignment.Center,  
5.     modifier = Modifier.triStateToggleable(  
6.         state = state,  
7.         onClick = {  
8.             state = when (state) {  
9.                 ToggleableState.On -> ToggleableState.Off  
10.                 ToggleableState.Off -> ToggleableState.Indeterminate  
11.                 ToggleableState.Indeterminate -> ToggleableState.On  
12.             }  
13.         },  
14.         role = Role.Checkbox,  
15.         interactionSource = remember { MutableInteractionSource() },  
16.         indication = rememberRipple(  
17.             bounded = false,  
18.             radius = 24.dp  
19.         )  
20.     )  
21. ) {  
22.     Icon(  
23.         imageVector = when (state) {  
24.             ToggleableState.On -> Icons.Default.Favorite  
25.             ToggleableState.Off -> Icons.Default.FavoriteBorder  
26.             ToggleableState.Indeterminate -> Icons.Default.FavoriteBorder  
27.         },  
28.         contentDescription = when (state) {  
29.             ToggleableState.On -> "favorite on"  
30.             ToggleableState.Off -> "favorite on"  
31.             ToggleableState.Indeterminate -> "favorite indeterminate"  
32.         },  
33.         tint = when (state) {  
34.             ToggleableState.On -> MaterialTheme.colors.primary  
35.             ToggleableState.Off -> MaterialTheme.colors.primary  
36.             ToggleableState.Indeterminate -> MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)  
37.         }  
38.     )  
39. }  

var state by remember { mutableStateOf(ToggleableState.On) } Box( contentAlignment = Alignment.Center, modifier = Modifier.triStateToggleable( state = state, onClick = { state = when (state) { ToggleableState.On -> ToggleableState.Off ToggleableState.Off -> ToggleableState.Indeterminate ToggleableState.Indeterminate -> ToggleableState.On } }, role = Role.Checkbox, interactionSource = remember { MutableInteractionSource() }, indication = rememberRipple( bounded = false, radius = 24.dp ) ) ) { Icon( imageVector = when (state) { ToggleableState.On -> Icons.Default.Favorite ToggleableState.Off -> Icons.Default.FavoriteBorder ToggleableState.Indeterminate -> Icons.Default.FavoriteBorder }, contentDescription = when (state) { ToggleableState.On -> "favorite on" ToggleableState.Off -> "favorite on" ToggleableState.Indeterminate -> "favorite indeterminate" }, tint = when (state) { ToggleableState.On -> MaterialTheme.colors.primary ToggleableState.Off -> MaterialTheme.colors.primary ToggleableState.Indeterminate -> MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled) } ) }