SubcomposeLayout

Composable Function

Common
@Composable
fun SubcomposeLayout(
    modifier: Modifier = Modifier,
    measurePolicy: SubcomposeMeasureScope.(Constraints) -> MeasureResult,
)

Analogue of Layout which allows to subcompose the actual content during the measuring stage for example to use the values calculated during the measurement as params for the composition of the children.

Possible use cases:

  • You need to know the constraints passed by the parent during the composition and can't solve your use case with just custom Layout or LayoutModifier. See androidx.compose.foundation.layout.BoxWithConstraints.
  • You want to use the size of one child during the composition of the second child.
  • You want to compose your items lazily based on the available size. For example you have a list of 100 items and instead of composing all of them you only compose the ones which are currently visible(say 5 of them) and compose next items when the component is scrolled.

Parameters

modifierModifier to apply for the layout.
measurePolicyMeasure policy which provides ability to subcompose during the measuring.
Common
@Composable
fun SubcomposeLayout(
    state: SubcomposeLayoutState,
    modifier: Modifier = Modifier,
    measurePolicy: SubcomposeMeasureScope.(Constraints) -> MeasureResult,
)

Analogue of Layout which allows to subcompose the actual content during the measuring stage for example to use the values calculated during the measurement as params for the composition of the children.

Possible use cases:

  • You need to know the constraints passed by the parent during the composition and can't solve your use case with just custom Layout or LayoutModifier. See androidx.compose.foundation.layout.BoxWithConstraints.
  • You want to use the size of one child during the composition of the second child.
  • You want to compose your items lazily based on the available size. For example you have a list of 100 items and instead of composing all of them you only compose the ones which are currently visible(say 5 of them) and compose next items when the component is scrolled.

Parameters

statethe state object to be used by the layout.
modifierModifier to apply for the layout.
measurePolicyMeasure policy which provides ability to subcompose during the measuring.

Code Examples

SubcomposeLayoutSample

@Composable
fun SubcomposeLayoutSample(
    mainContent: @Composable () -> Unit,
    dependentContent: @Composable (IntSize) -> Unit,
) {
    // enum class SlotsEnum { Main, Dependent }
    SubcomposeLayout { constraints ->
        val mainPlaceables = subcompose(SlotsEnum.Main, mainContent).map { it.measure(constraints) }
        val maxSize =
            mainPlaceables.fold(IntSize.Zero) { currentMax, placeable ->
                IntSize(
                    width = maxOf(currentMax.width, placeable.width),
                    height = maxOf(currentMax.height, placeable.height),
                )
            }
        layout(maxSize.width, maxSize.height) {
            mainPlaceables.forEach { it.placeRelative(0, 0) }
            subcompose(SlotsEnum.Dependent) { dependentContent(maxSize) }
                .forEach { it.measure(constraints).placeRelative(0, 0) }
        }
    }
}