im struggling a bit to understand subcomposeLayout...

# compose

[Adriano Celentano]

im struggling a bit to understand subcomposeLayout, someone has a super simple explanation / example somewhere ?

[Andrew Neal]

Checkout BackdropScaffold. https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/src/commonMain/kotlin/androidx/compose/material/BackdropScaffold.kt;l=431

[Daniel]

You've probably already seen this, but I found the sample useful a few hours ago when I was trying to understand it. https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]s/SubcomposeLayoutSample.kt;l=21?q=Subcompose&sq=&ss=androidx

[Adriano Celentano]

i was looking at that sample before yeah, i think i got it now a bit better, but still not fully there yet. Will give it another shot one day 😅

[Daniel]

Here's what I ended up doing with it @Adriano Celentano. Full disclosure, I don't really know what I'm doing.

SubcomposeLayout { constraints ->
            val fieldPlaceables = subcompose(ExposedDropdownMenuSlot.Field) {
                ExposedDropdownMenuField(
                    label = label,
                    selected = selected,
                    isExpanded = isExpanded.value,
                    interactionSource = interactionSource
                )
            }.map {
                it.measure(constraints)
            }

            val fieldSize = fieldPlaceables.fold(IntSize.Zero) { currentMax, placeable ->
                IntSize(
                    width = maxOf(currentMax.width, placeable.width),
                    height = maxOf(currentMax.height, placeable.height)
                )

            }

            layout(fieldSize.width, fieldSize.height) {
                fieldPlaceables.forEach { it.placeRelative(0, 0) }

                subcompose(<http://ExposedDropdownMenuSlot.Menu|ExposedDropdownMenuSlot.Menu>) {
                    ExposedDropdownMenuDropdown(
                        values = values,
                        selected = selected,
                        onSelect = onSelect,
                        isExpanded = isExpanded.value,
                        onCollapse = collapse,
                        fieldSize = DpOffset(fieldSize.width.toDp(), fieldSize.height.toDp())
                    )
                }.forEach {
                    it.measure(constraints).place(0, 0)
                }
            }
        }
}

enum class ExposedDropdownMenuSlot { Field Menu }