StyleStateKey

@ExperimentalFoundationStyleApi
open class StyleStateKey<T>(internal val defaultValue: T)

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.

Companion Object

Properties

val Pressed: StyleStateKey<Boolean>

The style state key for the pressed state of a state.

This state is true when the style component is pressed

val Hovered: StyleStateKey<Boolean>

The style state key for the hovered state of a style.

val Focused: StyleStateKey<Boolean>

The style state key for the focused state of a style.

val Selected: StyleStateKey<Boolean>

The style state key for the selected state of a style.

val Enabled: StyleStateKey<Boolean>

The style state key for the enabled state of a style.

val Toggle: StyleStateKey<ToggleableState>

The style state key for the hovered state of a style.

Code Examples

StyleStateKeySample

@Composable
fun StyleStateKeySample() {
    // 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)
}