StyleState

@ExperimentalFoundationStyleApi
sealed class StyleState

The state a style can use to select property values depending on the state of the component is a style for.

Properties

abstract val isEnabled: Boolean

isEnabled is true when the stylable component is enabled.

Elements that can be enabled and disabled will set value when they are called.

The StyleState.isEnabled function will only execute its block parameter when this isEnabled is true.

androidx.compose.foundation.text.BasicTextField, for example, sets this value to the value of the enabled parameter.

abstract val isFocused: Boolean

isFocused is true when the stylable component is focused.

Elements that are focusable will set this state to true when are focused.

The StyleScope.focused function reads this state and will only set the properties set in its block parameter when isPressed is true.

For example, focusable will send FocusInteraction.Focus and FocusInteraction.Unfocus interactions when the component receives focus or loses focus. When the style state is watching an InteractionSource this state will be updated when the focus interactions are received in the InteractionSource.

abstract val isHovered: Boolean

isHovered is true when the stylable component is hovered.

Elements that are hoverable will set this state to true when they are hovered.

The StyleScope.hovered function reads this state and will only set the properties set in its block parameter when isPressed is true.

For example, hoverable will send HoverInteraction.Enter and HoverInteraction.Exit interactions when a mouse enters or exits the component. When the style state is watching an InteractionSource this state will be updated when the focus interactions are received in the InteractionSource.

abstract val isPressed: Boolean

isPressed is true when the stylable component is pressed.

Elements that are pressable will set this state to true when they are pressed.

The StyleScope.pressed function reads this state and will only set the properties set in its block parameter when isPressed is true.

For example, clickable will send PressInteraction.Press and PressInteraction.Release interactions when the component is pressed and released. When the style state is watching an InteractionSource it will update this state.

abstract val isSelected: Boolean

isSelected is true when the stylable component is selected.

Elements that are selectable will set this property to true when they are selected.

The StyleScope.selected function reads this state and will only set the properties in its block parameter when isSelected is true.

abstract val isChecked: Boolean

isChecked is true when the stylable component is checked.

Elements that are toggleable will set this property to true when they are checked.

For example, components that use toggleable set isChecked to the value of the checked parameter.

The StyleScope.checked function reads this state and will only set the properties in its block parameter when isChecked is true.

abstract val triStateToggle: ToggleableState

triStateToggle is the state of a tri-state toggleable. A tri-state togglable is a component that can represent that the checked state is unspecified.

Elements that are selectable will set this property to true when is checked.

For example, components that use triStateToggleable will set triStateToggle parameter to the value of the checked parameter.

The StyleScope.checked function reads this state and will only set the properties in its block parameter when triStateToggle is ToggleableState.On.

The StyleScope.triStateToggleIndeterminate function reads this state and will only set the properties in its block parameter when the triStateToggle is ToggleableState.Indeterminate.

Functions

abstract operator fun <T> get(key: StyleStateKey<T>): T

Read the value of a style state key. This overloads the index operator which allows reading the key using the array index syntax.

This allows components to define custom state that can be used in a style to control the look of a composable. For example, a video playing application can introduce a custom PlayingStyleState<Boolean> and set the value of this state. This state can then be in a Style to customize the look of the component when it moves in an out of playing a value.

Code Examples

StyleStateSample

@Composable
fun StyleStateSample() {
    // Create a styleable clickable box
    @Composable
    fun ClickableStyleableBox(
        onClick: () -> Unit,
        modifier: Modifier = Modifier,
        style: Style = Style,
        enabled: Boolean = true,
    ) {
        val interactionSource = remember { MutableInteractionSource() }
        val styleState = rememberUpdatedStyleState(interactionSource) { it.isEnabled = enabled }
        Box(
            modifier =
                modifier
                    .clickable(interactionSource = interactionSource, onClick = onClick)
                    .styleable(styleState, style)
        )
    }
    // Create a 150x150 green box that is clickable
    ClickableStyleableBox(
        onClick = {},
        style = {
            background(Color.Green)
            size(150.dp)
            hovered { background(Color.Yellow) }
            pressed { background(Color.Red) }
            disabled { background(Color.Gray) }
        },
    )
}