Intrinsic sizes do 2 layout and measure passes that's why it's not a performant Modifier in LazyRows or Composables with lots child Composable.
You can't achieve this with LazyRow
because LazyRow
uses SubcomposeLayout to compose, via subCompose
function, that are in viewport of LazyRow. If there are only 5 items visible you will only get 6 item not every Composable and because of that it performs better over scroll modifiers with Composables that have many items.
However, you can use SubComposeLayout
itself to get maxHeight then calling subCompose with that maxHeight you can always get Composable measured with that height.
@Composable
internal fun MaxHeightSubcomposeLayout(
modifier: Modifier = Modifier,
content: @Composable () -> Unit
) {
var maxHeight = 0
val positionMap = remember {
hashMapOf<Int, Int>()
}
SubcomposeLayout(modifier = modifier) { constraints ->
var subCompositionIndex = 0
// This is for measuring Composables with range between 0 and width of parent composable
val wrappedConstraints = constraints.copy(minWidth = 0)
// get maxHeight by sub-composing each item if max height hasn't been calculated alread
if (maxHeight == 0) {
maxHeight = subcompose(subCompositionIndex, content).map {
subCompositionIndex++
it.measure(wrappedConstraints)
}.maxOf { it.height }
}
// get placeables to place in this Layout
val placeables: List<Placeable> = subcompose(subCompositionIndex, content).map {
subCompositionIndex++
it.measure(
wrappedConstraints.copy(
minHeight = maxHeight,
maxHeight = maxHeight
)
)
}
val hasBoundedWidth = constraints.hasBoundedWidth
val hasFixedWidth = constraints.hasFixedWidth
// If Composable has fixed Size or fillMaxWidth use that Constraints else
// max width is equal to sum of width of all child Composables
val layoutWidth = if (hasBoundedWidth && hasFixedWidth) constraints.maxWidth
else placeables.sumOf { it.width }.coerceIn(constraints.minWidth, constraints.maxWidth)
var xPos = 0
layout(layoutWidth, maxHeight) {
placeables.forEachIndexed { index, placeable: Placeable ->
val indexedPosition = positionMap[index]
if (indexedPosition == null) {
positionMap[index] = xPos
}
placeable.placeRelative(indexedPosition ?: xPos, 0)
xPos += placeable.width
}
}
}
}
Demo
![enter image description here](https://cdn.statically.io/img/i.sstatic.net/8DvzZnTK.gif)
@Preview
@Composable
fun MaxHeightTest() {
val items1 = remember {
List(3) {
Random.nextInt(30, 120)
}
}
val items2 = remember {
List(20) {
Random.nextInt(30, 120)
}
}
Column(modifier = Modifier.fillMaxSize()) {
Text("items1: $items1")
Text("items2: $items2")
MaxHeightSubcomposeLayout(
modifier = Modifier
.border(1.dp, Color.Red)
.horizontalScroll(
rememberScrollState()
)
) {
items1.forEach {
Box(
modifier = Modifier.width(50.dp).height(it.dp)
.background(Color.Yellow, RoundedCornerShape(16.dp))
)
Spacer(modifier = Modifier.width(16.dp))
}
}
Spacer(Modifier.height(16.dp))
MaxHeightSubcomposeLayout(
modifier = Modifier.border(1.dp, Color.Red)
.fillMaxWidth()
.horizontalScroll(
rememberScrollState()
)
) {
items1.forEach {
Box(
modifier = Modifier.width(50.dp).height(it.dp)
.background(Color.Yellow, RoundedCornerShape(16.dp))
)
Spacer(modifier = Modifier.width(16.dp))
}
}
Spacer(Modifier.height(16.dp))
MaxHeightSubcomposeLayout(
modifier = Modifier.border(1.dp, Color.Red)
.fillMaxWidth()
.horizontalScroll(
rememberScrollState()
)
) {
items2.forEach {
Box(
modifier = Modifier.width(50.dp).height(it.dp)
.background(getRandomColor(), RoundedCornerShape(16.dp))
)
Spacer(modifier = Modifier.width(16.dp))
}
}
}
}
You can refer this tutorial that covers Constrains, Layouts, intrinsic sizes, SubcomposeLayouts and more if you are interested learning more about these concepts.
https://github.com/SmartToolFactory/Jetpack-Compose-Tutorials/tree/master/Tutorial1-1Basics/src/main/java/com/smarttoolfactory/tutorial1_1basics/chapter3_layout