layoutId

Modifier in Compose Ui

Tag the element with [layoutId] to identify the element within its parent.

Last updated: 2024-10-22 13:47

Installation

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

Overloads

@Stable
fun Modifier.layoutId(layoutId: Any)

Code Example

LayoutTagChildrenUsage

@Composable
fun LayoutTagChildrenUsage(header: @Composable () -> Unit, footer: @Composable () -> Unit) {
    Layout({
        // Here the Containers are only needed to apply the modifiers. You could use the
        // modifier on header and footer directly if they are composables accepting modifiers.
        Box(Modifier.layoutId("header")) { header() }
        Box(Modifier.layoutId("footer")) { footer() }
    }) { measurables, constraints ->
        val placeables =
            measurables.map { measurable ->
                when (measurable.layoutId) {
                    // You should use appropriate constraints. Here we measure fake constraints.
                    "header" -> measurable.measure(Constraints.fixed(100, 100))
                    "footer" -> measurable.measure(constraints)
                    else -> error("Unexpected tag")
                }
            }
        // Size should be derived from children measured sizes on placeables,
        // but this is simplified for the purposes of the example.
        layout(100, 100) { placeables.forEach { it.placeRelative(0, 0) } }
    }
}