SubComposeLayout¶
You can use SubComposeLayout to measure and resize Composables.
Example¶
Let`s say you have a chat log this:
And now you want to set the width of every composable to the width of the widest Composable
You can use the SubComposeLayout to get the height/width of every child composable and then you can resize the values to the one that you want.
@Composable
fun SubComposeLayoutDemo() {
ResizeWidthColumn(Modifier.fillMaxWidth(), true) {
Box(
modifier = Modifier
.background(Color.Red)
) {
Text("Hello")
}
Box(
modifier = Modifier
.padding(top = 8.dp)
.background(Color.Red)
) {
Text("This is a long messsage \n and its longer")
}
}
}
@Composable
fun ResizeWidthColumn(modifier: Modifier, resize: Boolean, mainContent: @Composable () -> Unit) {
SubcomposeLayout(modifier) { constraints ->
val mainPlaceables = subcompose(SlotsEnum.Main, mainContent).map {
// Here we measure the width/height of the child Composables
it.measure(Constraints())
}
//Here we find the max width/height of the child Composables
val maxSize = mainPlaceables.fold(IntSize.Zero) { currentMax, placeable ->
IntSize(
width = maxOf(currentMax.width, placeable.width),
height = maxOf(currentMax.height, placeable.height)
)
}
val resizedPlaceables: List<Placeable> =
subcompose(SlotsEnum.Dependent, mainContent).map {
if (resize) {
/** Here we rewrite the child Composables to have the width of
* widest Composable
*/
it.measure(
Constraints(
minWidth = maxSize.width
)
)
} else {
// Ask the child for its preferred size.
it.measure(Constraints())
}
}
/**
* We can place the Composables on the screen
* with layout() and the place() functions
*/
layout(constraints.maxWidth, constraints.maxHeight) {
resizedPlaceables.forEachIndexed { index, placeable ->
val widthStart = resizedPlaceables.take(index).sumOf { it.measuredHeight }
placeable.place(0, widthStart)
}
}
}
}
enum class SlotsEnum {
Main,
Dependent
}
See also:¶
Last update: December 2, 2022