Known direct subclasses

Style represents an opaque type which encodes a description of how to style a node in compose. It is implemented semantically like a lambda which is executed on a StyleScope.

These Style objects allow for styles to be defined similarly to a chain of Modifiers, however these Styles are applied by passing them into a styleable Modifier, or by passing them into an appropriately defined Style parameter of a Composable function.

The primary benefits of Style objects are:

  1. They define their own observation scope, meaning you can read State objects inside of them without risking recomposition. Properties that are changed as a result of the State changing will cause only the minimal invalidation possible (ie, changing background will only cause a redraw)

  2. CompositionLocals can be read inside of them. This allows for many theme-based values to be used in their definition without adding to the capture scope of the lambda.

  3. The StyleScope interface allows for state-based styling to be defined such as "pressed" states or "hover" states or "focus" states.

  4. Transition-based animations of style properties can be done automatically without defining any animated values by leveraging the animate API.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.styleable
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Create a styleable box
@Composable
fun StyleableBox(modifier: Modifier = Modifier, style: Style = Style) {
    Box(modifier = modifier.styleable(null, style))
}

// Style the styleable box to be a 150x150 green box
StyleableBox(
    style = {
        background(Color.Green)
        size(150.dp)
    }
)
 
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.style.MutableStyleState
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.hovered
import androidx.compose.foundation.style.pressed
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
import androidx.compose.ui.unit.dp

// Create a styleable clickable box
@Composable
fun ClickableStyleableBox(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    style: Style = Style,
) {
    val interactionSource = remember { MutableInteractionSource() }
    val styleState = remember { MutableStyleState(interactionSource) }
    Box(
        modifier =
            modifier
                .clickable(interactionSource = interactionSource, onClick = onClick)
                .styleable(styleState, style)
    )
}

ClickableStyleableBox(
    onClick = {},
    style = {
        background(Color.Blue)
        size(150.dp)
        hovered { animate { background(Color.Yellow) } }
        pressed { animate { background(Color.Red) } }
    },
)
See also
styleable
StyleScope

Summary

Nested types

Public companion functions
open Unit
Cmn

Public functions
Unit
Cmn

Extension functions
infix Style

Merges this styles with another.
Cmn

Public companion functions

applyStyle

Cmn 
open fun StyleScope.applyStyle(): Unit

Public functions

applyStyle

Cmn 
fun StyleScope.applyStyle(): Unit

Extension functions

then

Cmn 
@ExperimentalFoundationStyleApi
infix fun Style.then(other: Style): Style

Merges this styles with another. The style to the right on the then will overwrite the properties set by the style to the left.

Parameters
other: Style

the style to merge into the receiver.