New Compose Multiplatform components arrived on Composables UICheck it out →

Modifier in Compose Ui

composed

Common

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.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.ui:ui:1.7.0-beta04")
}

Overloads


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

Code Examples

InspectorInfoInComposedModifierSample

@Sampled
@Composable
@Suppress("UnnecessaryComposedModifier"
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

@Sampled
@Composable
@Suppress("UnnecessaryComposedModifier"
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
        }
    )
}