StyleStateKey

The key to a StyleState value. A StyleState is a map from StyleStateKey to the current value of the style state and the current value can be retrieved from a StyleState using array index syntax or calling StyleState.get directly.

A StyleStateKey can be used to create a custom value that can be used in a Style to provide properties based on the state of the value.

There are a set of predefined states that are expected to be commonly provided by elements that are styleable, StyleStateKey.Pressed, StyleStateKey.Hovered, StyleStateKey.Toggle, StyleStateKey.Enabled, and StyleStateKey.Selected. The StyleState provides helper properties for these states, StyleState.isPressed, StyleState.isHovered, etc.

It is recommended that any new StyleStateKey be a constant with at least the same accessibility as the component that uses it. It is also recommended to have a corresponding extension functions for StyleState to allow a style to more easily access the state. For example, if a StyleStateKey is added for a "playing" state, such as var PlayingStateKey = styleStateKey(false) then it is recommended for a val StyleState.isPlaying = this.get(PlayingStateKey) to be declared.

It is also recommended that an extension function for StyleScope also be created that allows the stylefun StyleScope.playing(block: StyleScope.() -> Unit) be declared that will only call block when the StyleState.isPlaying is true.

import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.StyleScope
import androidx.compose.foundation.style.StyleStateKey
import androidx.compose.ui.graphics.Color

// Create a new StyleStateKey
val playingStateKey = StyleStateKey(false)

// Introduce an extension function to read the style state
fun StyleScope.playerPlaying(value: Style) {
    state(playingStateKey, value) { key, state -> state[key] }
}

// Using the extension function to change the border color to green while playing
val style = Style {
    borderColor(Color.Gray)
    playerPlaying { borderColor(Color.Green) }
}

// Using the style in a composable that sets the state.
MediaPlayer(url = "https://example.com/media/video", style = style)

Summary

val Enabled: StyleStateKey<Boolean>

val Focused: StyleStateKey<Boolean>

val Hovered: StyleStateKey<Boolean>

val Pressed: StyleStateKey<Boolean>

val Selected: StyleStateKey<Boolean>

val Toggle: StyleStateKey<ToggleableState>

<T : Any?> StyleStateKey(defaultValue: T)

protected open suspend fun processInteraction(
    interaction: Interaction,
    styleState: MutableStyleState
): Unit