composed

Modifier in Compose Ui

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: 2024-09-07 14:23

Installation

dependencies {
   implementation("androidx.compose.ui:ui:1.8.0-alpha01")
}

Overloads

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

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

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

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

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

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
            }
        )
}