composed

Compose Modifier

Common
fun Modifier.composed(
    inspectorInfo: InspectorInfo.() -> Unit = NoInspectorInfo,
    factory: @Composable Modifier.() -> Modifier,
): Modifier

Declare a just-in-time composition of a Modifier that will be composed for each element it modifies. composed may be used to implement stateful modifiers that have instance-specific state for each modified element, allowing the same Modifier instance to be safely reused for multiple elements while maintaining element-specific state.

If inspectorInfo is specified this modifier will be visible to tools during development. Specify the name and arguments of the original modifier.

materialize must be called to create instance-specific modifiers if you are directly applying a Modifier to an element tree node.

Common
fun Modifier.composed(
    fullyQualifiedName: String,
    key1: Any?,
    inspectorInfo: InspectorInfo.() -> Unit = NoInspectorInfo,
    factory: @Composable Modifier.() -> Modifier,
): Modifier

Declare a just-in-time composition of a Modifier that will be composed for each element it modifies. composed may be used to implement stateful modifiers that have instance-specific state for each modified element, allowing the same Modifier instance to be safely reused for multiple elements while maintaining element-specific state.

When keys are provided, composed produces a Modifier that will compare equals to another modifier constructed with the same keys in order to take advantage of caching and skipping optimizations. fullyQualifiedName should be the fully-qualified import name for your modifier factory function, e.g. com.example.myapp.ui.fancyPadding.

If inspectorInfo is specified this modifier will be visible to tools during development. Specify the name and arguments of the original modifier.

materialize must be called to create instance-specific modifiers if you are directly applying a Modifier to an element tree node.

Common
fun Modifier.composed(
    fullyQualifiedName: String,
    key1: Any?,
    key2: Any?,
    inspectorInfo: InspectorInfo.() -> Unit = NoInspectorInfo,
    factory: @Composable Modifier.() -> Modifier,
): Modifier

Declare a just-in-time composition of a Modifier that will be composed for each element it modifies. composed may be used to implement stateful modifiers that have instance-specific state for each modified element, allowing the same Modifier instance to be safely reused for multiple elements while maintaining element-specific state.

When keys are provided, composed produces a Modifier that will compare equals to another modifier constructed with the same keys in order to take advantage of caching and skipping optimizations. fullyQualifiedName should be the fully-qualified import name for your modifier factory function, e.g. com.example.myapp.ui.fancyPadding.

If inspectorInfo is specified this modifier will be visible to tools during development. Specify the name and arguments of the original modifier.

materialize must be called to create instance-specific modifiers if you are directly applying a Modifier to an element tree node.

Common
fun Modifier.composed(
    fullyQualifiedName: String,
    key1: Any?,
    key2: Any?,
    key3: Any?,
    inspectorInfo: InspectorInfo.() -> Unit = NoInspectorInfo,
    factory: @Composable Modifier.() -> Modifier,
): Modifier

Declare a just-in-time composition of a Modifier that will be composed for each element it modifies. composed may be used to implement stateful modifiers that have instance-specific state for each modified element, allowing the same Modifier instance to be safely reused for multiple elements while maintaining element-specific state.

When keys are provided, composed produces a Modifier that will compare equals to another modifier constructed with the same keys in order to take advantage of caching and skipping optimizations. fullyQualifiedName should be the fully-qualified import name for your modifier factory function, e.g. com.example.myapp.ui.fancyPadding.

If inspectorInfo is specified this modifier will be visible to tools during development. Specify the name and arguments of the original modifier.

materialize must be called to create instance-specific modifiers if you are directly applying a Modifier to an element tree node.

Common
fun Modifier.composed(
    fullyQualifiedName: String,
    vararg keys: Any?,
    inspectorInfo: InspectorInfo.() -> Unit = NoInspectorInfo,
    factory: @Composable Modifier.() -> Modifier,
): Modifier

Declare a just-in-time composition of a Modifier that will be composed for each element it modifies. composed may be used to implement stateful modifiers that have instance-specific state for each modified element, allowing the same Modifier instance to be safely reused for multiple elements while maintaining element-specific state.

When keys are provided, composed produces a Modifier that will compare equals to another modifier constructed with the same keys in order to take advantage of caching and skipping optimizations. fullyQualifiedName should be the fully-qualified import name for your modifier factory function, e.g. com.example.myapp.ui.fancyPadding.

If inspectorInfo is specified this modifier will be visible to tools during development. Specify the name and arguments of the original modifier.

materialize must be called to create instance-specific modifiers if you are directly applying a Modifier to an element tree node.

Code Examples

InspectorInfoInComposedModifierSample

@Suppress("UnnecessaryComposedModifier")
@Composable
fun InspectorInfoInComposedModifierSample() {
    // let's create your own custom stateful modifier
    fun Modifier.myColorModifier(color: Color) =
        composed(
            // pass inspector information for debug
            inspectorInfo =
                debugInspectorInfo {
                    // name should match the name of the modifier
                    name = "myColorModifier"
                    // specify a single argument as the value when the argument name is irrelevant
                    value = color
                },
            // pass your modifier implementation that resolved per modified element
            factory = {
                // add your modifier implementation here
                Modifier
            },
        )
}

InspectorInfoInComposedModifierWithArgumentsSample

@Suppress("UnnecessaryComposedModifier")
@Composable
fun InspectorInfoInComposedModifierWithArgumentsSample() {
    // let's create your own custom stateful modifier with multiple arguments
    fun Modifier.myModifier(width: Dp, height: Dp, color: Color) =
        composed(
            // pass inspector information for debug
            inspectorInfo =
                debugInspectorInfo {
                    // name should match the name of the modifier
                    name = "myModifier"
                    // add name and value of each argument
                    properties["width"] = width
                    properties["height"] = height
                    properties["color"] = color
                },
            // pass your modifier implementation that resolved per modified element
            factory = {
                // add your modifier implementation here
                Modifier
            },
        )
}