Known direct subclasses
StyleScope

A StyleScope is the receiver scope of a Style lambda.

An interface that introduces the state property to a Style receiver scope.

See also
StyleScope

Summary

Public functions
Unit
<T : Any?> state(
    key: StyleStateKey<T>,
    block: () -> Unit,
    active: (key: StyleStateKey<T>, state: StyleState) -> Boolean
)

A helper function to implement state reading extension functions such as StyleScope.pressed.
Cmn

Public properties
StyleState

The state of the component. applying this style.
Cmn

Extension functions
Unit

A helper function to implement state reading extension functions such as StyleScope.pressed for use with Boolean states.
Cmn
Unit

Defines a Style to be applied when the component is StyleState.isChecked is true.
Cmn
Unit

Defines a Style to be applied when the component is disabled.
Cmn
Unit

Defines a Style to be applied when the component is focused.
Cmn
Unit

Defines a Style to be applied when the component is hovered.
Cmn
Unit

Defines a Style to be applied when the component is pressed.
Cmn
Unit

Defines a Style to be applied when the component is StyleState.isSelected is true.
Cmn
Unit

Defines a Style to be applied when the component is StyleState.triStateToggle is ToggleableState.Indeterminate.
Cmn
Unit

Defines a Style to be applied when the component is StyleState.triStateToggle is ToggleableState.Off.
Cmn
Unit

Defines a Style to be applied when the component is StyleState.triStateToggle is ToggleableState.On.
Cmn

Public functions

state

Cmn 
fun <T : Any?> state(
    key: StyleStateKey<T>,
    block: () -> Unit,
    active: (key: StyleStateKey<T>, state: StyleState) -> Boolean
): Unit

A helper function to implement state reading extension functions such as StyleScope.pressed.

Custom style states can use this function to implement start reading functions to be consistent with the predefined state reading functions.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.style.CustomStyle
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.StyleScope
import androidx.compose.foundation.style.StyleStateKey
import androidx.compose.foundation.style.rememberUpdatedStyleState
import androidx.compose.foundation.style.state
import androidx.compose.foundation.style.styleable
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

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

// In the module scope are the following declarations:
//
//    // A custom style scope which has all the properties of StyleScope
//    interface MediaPlayerStyleScope : StyleScope
//
//    // A custom style type
//    fun interface MediaPlayerStyle : CustomStyle<MediaPlayerStyleScope> {
//        companion object : MediaPlayerStyle {
//            override fun MediaPlayerStyleScope.applyStyle() { }
//        }
//    }

// Introduce a function to convert the custom style to a Style
fun MediaPlayerStyle.toStyle(): Style = Style {
    val scope = object : StyleScope by this, MediaPlayerStyleScope {}
    with(scope) { applyStyle() }
}

// Introduce an extension function to read the style state. This will only be
// available in a MediaPlayerStyle.
fun MediaPlayerStyleScope.playerPlaying(block: () -> Unit) {
    state(playingStateKey, block)
}

// The MediaPlayer composable
@Suppress("UNUSED_PARAMETER")
@Composable
fun MediaPlayer(
    url: String,
    modifier: Modifier = Modifier,
    style: MediaPlayerStyle = MediaPlayerStyle,
    playing: Boolean = true,
) {
    val styleState =
        rememberUpdatedStyleState(null) { state -> state[playingStateKey] = playing }
    Box(modifier = modifier.styleable(styleState, style.toStyle())) {
        // Implementation of the media player
    }
}

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

        // This only sets the border color to green when the media player is playing
        playerPlaying { borderColor(Color.Green) }
    },
)
Parameters
key: StyleStateKey<T>

the StyleStateKey for the custom state.
block: () -> Unit

the block to execute when active returns true.
active: (key: StyleStateKey<T>, state: StyleState) -> Boolean

an expression that should return true when the state is active and block should be called.

Public properties

state

Cmn 
val state: StyleState

The state of the component. applying this style. For example, if a component is pressed the StyleState.isPressed will be true.

Custom states can be read from the state using the StyleStateKey for the state.

Extension functions

StyleStateScope.state

Cmn 
@ExperimentalFoundationStyleApi
fun StyleStateScope.state(key: StyleStateKey<Boolean>, block: () -> Unit): Unit

A helper function to implement state reading extension functions such as StyleScope.pressed for use with Boolean states.

Custom style states can use this function to implement start reading functions to be consistent with the predefined state reading functions.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.style.CustomStyle
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.StyleScope
import androidx.compose.foundation.style.StyleStateKey
import androidx.compose.foundation.style.rememberUpdatedStyleState
import androidx.compose.foundation.style.state
import androidx.compose.foundation.style.styleable
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

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

// In the module scope are the following declarations:
//
//    // A custom style scope which has all the properties of StyleScope
//    interface MediaPlayerStyleScope : StyleScope
//
//    // A custom style type
//    fun interface MediaPlayerStyle : CustomStyle<MediaPlayerStyleScope> {
//        companion object : MediaPlayerStyle {
//            override fun MediaPlayerStyleScope.applyStyle() { }
//        }
//    }

// Introduce a function to convert the custom style to a Style
fun MediaPlayerStyle.toStyle(): Style = Style {
    val scope = object : StyleScope by this, MediaPlayerStyleScope {}
    with(scope) { applyStyle() }
}

// Introduce an extension function to read the style state. This will only be
// available in a MediaPlayerStyle.
fun MediaPlayerStyleScope.playerPlaying(block: () -> Unit) {
    state(playingStateKey, block)
}

// The MediaPlayer composable
@Suppress("UNUSED_PARAMETER")
@Composable
fun MediaPlayer(
    url: String,
    modifier: Modifier = Modifier,
    style: MediaPlayerStyle = MediaPlayerStyle,
    playing: Boolean = true,
) {
    val styleState =
        rememberUpdatedStyleState(null) { state -> state[playingStateKey] = playing }
    Box(modifier = modifier.styleable(styleState, style.toStyle())) {
        // Implementation of the media player
    }
}

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

        // This only sets the border color to green when the media player is playing
        playerPlaying { borderColor(Color.Green) }
    },
)
Parameters
key: StyleStateKey<Boolean>

the StyleStateKey for the custom state.
block: () -> Unit

the block to execute when the style state is true.

StyleStateScope.checked

Cmn 
@ExperimentalFoundationStyleApi
fun StyleStateScope.checked(block: () -> Unit): Unit

Defines a Style to be applied when the component is StyleState.isChecked is true. The properties within the provided block will override or merge with the base style of the component when a toggle interaction is detected.

See also
isChecked
focused
hovered
pressed
selected
toggleable

StyleStateScope.disabled

Cmn 
@ExperimentalFoundationStyleApi
fun StyleStateScope.disabled(block: () -> Unit): Unit

Defines a Style to be applied when the component is disabled. The properties within the provided value Style will override or merge with the base style of the component when the style state for the component is disabled.

Parameters
block: () -> Unit

The Style to apply on hover.
See also
isEnabled

StyleStateScope.focused

Cmn 
@ExperimentalFoundationStyleApi
fun StyleStateScope.focused(block: () -> Unit): Unit

Defines a Style to be applied when the component is focused. The properties within the provided value Style will override or merge with the base style of the component when a focus interaction is detected.

Parameters
block: () -> Unit

The Style to apply on focus.
See also
isFocused
checked
hovered
pressed
selected

StyleStateScope.hovered

Cmn 
@ExperimentalFoundationStyleApi
fun StyleStateScope.hovered(block: () -> Unit): Unit

Defines a Style to be applied when the component is hovered. The properties within the provided value Style will override or merge with the base style of the component when a hover interaction is detected.

Parameters
block: () -> Unit

The Style to apply on hover.
See also
isHovered
checked
focused
pressed
selected

StyleStateScope.pressed

Cmn 
@ExperimentalFoundationStyleApi
fun StyleStateScope.pressed(block: () -> Unit): Unit

Defines a Style to be applied when the component is pressed. The properties within the provided value Style will override or merge with the base style of the component when a press interaction is detected.

Parameters
block: () -> Unit

The Style to apply on press.
See also
isPressed
checked
focused
hovered
selected

StyleStateScope.selected

Cmn 
@ExperimentalFoundationStyleApi
fun StyleStateScope.selected(block: () -> Unit): Unit

Defines a Style to be applied when the component is StyleState.isSelected is true. The properties within the provided block Style will override or merge with the base style of the component when a toggle interaction is detected.

Parameters
block: () -> Unit

The Style to apply on press.
See also
isSelected

StyleStateScope.triStateToggleIndeterminate

Cmn 
@ExperimentalFoundationStyleApi
fun StyleStateScope.triStateToggleIndeterminate(block: () -> Unit): Unit

Defines a Style to be applied when the component is StyleState.triStateToggle is ToggleableState.Indeterminate. The properties within the provided block Style will override or merge with the base style of the component when a toggle interaction is detected.

Parameters
block: () -> Unit

The Style to apply on press.
See also
triStateToggle
triStateToggleable

StyleStateScope.triStateToggleOff

Cmn 
@ExperimentalFoundationStyleApi
fun StyleStateScope.triStateToggleOff(block: () -> Unit): Unit

Defines a Style to be applied when the component is StyleState.triStateToggle is ToggleableState.Off. The properties within the provided block Style will override or merge with the base style of the component when a toggle interaction is detected.

Parameters
block: () -> Unit

The Style to apply on press.
See also
triStateToggle
triStateToggleable

StyleStateScope.triStateToggleOn

Cmn 
@ExperimentalFoundationStyleApi
fun StyleStateScope.triStateToggleOn(block: () -> Unit): Unit

Defines a Style to be applied when the component is StyleState.triStateToggle is ToggleableState.On. The properties within the provided block Style will override or merge with the base style of the component when a toggle interaction is detected.

Parameters
block: () -> Unit

The Style to apply on press.
See also
triStateToggle
triStateToggleable