Style

@ExperimentalFoundationStyleApi
fun interface Style

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.

Functions

fun StyleScope.applyStyle()

Code Examples

SimpleStyleSample

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

StyleAnimationSample

@Composable
fun StyleAnimationSample() {
    // 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)
        )
    }
    ClickableStyleableBox(
        onClick = {},
        style = {
            background(Color.Blue)
            size(150.dp)
            hovered { animate { background(Color.Yellow) } }
            pressed { animate { background(Color.Red) } }
            disabled { animate { background(Color.Gray) } }
        },
    )
}