Custom Layout Question (some sample code in the 🧵)… I’m writing a basic Grid composable that takes a number of columns and a content composable. To do the measuring of the child measurables, setting the width contraints is pretty straight forward. But I’m curious about the height constraints for each measurable. It seems like I should take into account the heights of previously measured items (well, rows), and calculate the max available remaining height (based on the overall maxHeight constraints passed into the layout) and then pass height constraints into the measure function for the current item to ensure that it fits within the overall space. Does that seem right or do I not need to worry about

It’s up to you and how you want the layout to behave. If a layout measures itself beyond its max constraints then it will automatically be cropped and centered in its parent. But a layout is also free to give whatever constraints it wants to its children and crop them or arrange them however it wants. So if you want your grid items to be able to adapt to the available space, you'll need to give them accurate constraints. If you want them to be ignorant, you can implement that too

@Zach Klippenstein (he/him) [MOD] thanks. I think I follow. If I want:

a layout measures itself beyond its max constraints then it will automatically be cropped and centered in its parent.

then I would measure the children without any further constraints, and use the sum of the row heights as the layout height. Or if I want:

a layout is also free to give whatever constraints it wants to its children and crop them or arrange them however it wants.

then I would calculate and limit the height constraints when measuring the children, so they they all fit within the layout. Correct? I think for my grid I will go with a variation on the first option: … I’ll measure children without any further constraints, and then for the layout, I’ll use the sum of the row heights, but coerce that value to be within the bounds of the container constraints. If I understand everything correctly, that’ll result in a grid that is effectively laid out from top to bottom, and if the content is too tall, rows/items at the bottom will get clipped/cropped out. To me that makes the most sense for my use case. If I call:

Grid( columns = 3,
   modifier = Modifier.height(40.dp)) {
        (1..100).forEach { Text("Item $it") }
}

My expectation would be that it renders the first row or 2 and then clips somewhere in/around the 3rd row, since I set the height for the Grid to be

40.dp

. I think what I said above would accomplish that. I would NOT want it show show me some middle section of the list (because I did the layout pass with a huge height), or make each Text get clipped to a super tiny size (because I limited the height of each child so that they would all fit within the 40.dp limit). I’ll play around with it and see what I get.

A layout measures itself by passing values to the

layout()

function in the

MeasurePolicy

. If that value is outside the max constraints, then it gets cropped and centered. But the layout can also measure its children with larger constraints, then measure itself as max constraints (so it has control over its own cropping/alignment in parent), and place its children however it wants.

yeah. I’m saying I’ll do:

//measure all the measurables, then

val layoutHeight = constraints.constrainHeight(rowHeights.sum())
layout(width, layoutHeight) {
   //place the children
}

right that makes sense

Hey look at that!