androidx.compose.foundation.selection
Extension functions summary
For Modifier | |
Modifier |
Modifier.selectable(selected: Boolean, enabled: Boolean = true, role: Role? = null, interactionState: InteractionState = remember { InteractionState() }, indication: Indication? = AmbientIndication.current(), onClick: () -> Unit) Configure component to be selectable, usually as a part of a mutually exclusive group, where only one item can be selected at any point in time. |
Modifier |
Modifier.toggleable(value: Boolean, enabled: Boolean = true, role: Role? = null, interactionState: InteractionState = remember { InteractionState() }, indication: Indication? = AmbientIndication.current(), onValueChange: (Boolean) -> Unit) Configure component to make it toggleable via input and accessibility events |
Modifier |
Modifier.triStateToggleable(state: ToggleableState, enabled: Boolean = true, role: Role? = null, interactionState: InteractionState = remember { InteractionState() }, indication: Indication? = AmbientIndication.current(), onClick: () -> Unit) Configure component to make it toggleable via input and accessibility events with three states: On, Off and Indeterminate. |
Extension functions
selectable
@Composable fun Modifier.selectable(
selected: Boolean,
enabled: Boolean = true,
role: Role? = null,
interactionState: InteractionState = remember { InteractionState() },
indication: Indication? = AmbientIndication.current(),
onClick: () -> Unit
): Modifier
Configure component to be selectable, usually as a part of a mutually exclusive group, where only one item can be selected at any point in time. A typical example of mutually exclusive set is a RadioGroup or a row of Tabs.
If you want to make an item support on/off capabilities without being part of a set, consider using Modifier.toggleable
import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.size import androidx.compose.foundation.selection.selectable import androidx.compose.material.Text import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember val option1 = Color.Red val option2 = Color.Blue var selectedOption by remember { mutableStateOf(option1) } Column { Text("Selected: $selectedOption") Row { listOf(option1, option2).forEach { color -> val selected = selectedOption == color Box( Modifier .size(100.dp) .background(color = color) .selectable( selected = selected, onClick = { selectedOption = color } ) ) } } }
Parameters | |
---|---|
selected: Boolean | whether or not this item is selected in a mutually exclusion set |
onClick: () -> Unit | callback to invoke when this item is clicked |
enabled: Boolean = true | whether or not this selectable will handle input events and appear enabled from a semantics perspective |
role: Role? = null | the type of user interface element. Accessibility services might use this to describe the element or do customizations |
interactionState: InteractionState = remember { InteractionState() } | InteractionState that will be updated when this element is pressed, using Interaction.Pressed |
indication: Indication? = AmbientIndication.current() | indication to be shown when the modified element is pressed. By default,
the indication from AmbientIndication will be used. Set to null to show no indication |
toggleable
@Composable fun Modifier.toggleable(
value: Boolean,
enabled: Boolean = true,
role: Role? = null,
interactionState: InteractionState = remember { InteractionState() },
indication: Indication? = AmbientIndication.current(),
onValueChange: (Boolean) -> Unit
): Modifier
Configure component to make it toggleable via input and accessibility events
import androidx.compose.foundation.selection.toggleable import androidx.compose.material.Text import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember var checked by remember { mutableStateOf(false) } // content that you want to make toggleable Text( modifier = Modifier.toggleable(value = checked, onValueChange = { checked = it }), text = checked.toString() )
See Also
Parameters | |
---|---|
value: Boolean | whether Toggleable is on or off |
onValueChange: (Boolean) -> Unit | callback to be invoked when toggleable is clicked, therefore the change of the state in requested. |
enabled: Boolean = true | whether or not this toggleable will handle input events and appear enabled for semantics purposes |
role: Role? = null | the type of user interface element. Accessibility services might use this to describe the element or do customizations |
interactionState: InteractionState = remember { InteractionState() } | InteractionState that will be updated when this toggleable is pressed, using Interaction.Pressed |
indication: Indication? = AmbientIndication.current() | indication to be shown when modified element is pressed. Be default,
indication from AmbientIndication will be used. Pass null to show no indication |
triStateToggleable
@Composable fun Modifier.triStateToggleable(
state: ToggleableState,
enabled: Boolean = true,
role: Role? = null,
interactionState: InteractionState = remember { InteractionState() },
indication: Indication? = AmbientIndication.current(),
onClick: () -> Unit
): Modifier
Configure component to make it toggleable via input and accessibility events with three states: On, Off and Indeterminate.
TriStateToggleable should be used when there are dependent Toggleables associated to this component and those can have different values.
import androidx.compose.foundation.selection.triStateToggleable import androidx.compose.material.Text import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember var checked by remember { mutableStateOf(ToggleableState.Indeterminate) } // content that you want to make toggleable Text( modifier = Modifier.triStateToggleable( state = checked, onClick = { checked = if (checked == ToggleableState.On) ToggleableState.Off else ToggleableState.On } ), text = checked.toString() )
See Also
Parameters | |
---|---|
state: |