I'm trying to create a layout in Jetpack Compose where I have a LazyColumn containing a full-width header and a LazyVerticalGrid below it. The grid should wrap its content height and take the full width of the screen. However, I'm encountering issues with the layout and scrolling behavior.
The error: java.lang.IllegalStateException: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed.
@Composable
fun ScrollableGridWithHeader() {
val items = remember { List(20) { "Item #$it" } }
LazyColumn {
// Full-width header
item {
Box(
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.background(Color.Red),
contentAlignment = Alignment.Center
) {
Text(text = "Upload Images", color = Color.White)
}
}
// LazyVerticalGrid
item {
LazyVerticalGrid(
cells = GridCells.Fixed(2), // or use GridCells.Adaptive(140.dp) if preferred
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight(),
verticalArrangement = Arrangement.spacedBy(8.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
items(items.size) { index ->
Box(
modifier = Modifier
.size(140.dp)
.background(Color.Gray),
contentAlignment = Alignment.Center
) {
Text(text = items[index])
}
}
}
}
}
}
You can't have a vertically scrolling Composable inside another vertically scrolling Composable without setting a fixed height to the nested Composable. In your case however, I would suggest an alternative solution.
If you want to include a full-width header that displays at the top in your LazyVerticalGrid
that also scrolls with the content, you can use span
for an item
like this:
@Composable
fun ScrollableGridWithHeader() {
val items = remember { List(20) { "Item #$it" } }
LazyVerticalGrid(
columns = GridCells.Fixed(2),
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight(),
verticalArrangement = Arrangement.spacedBy(8.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
item(span = { GridItemSpan(maxLineSpan) }) { // let item span across all columns in Grid
Box(
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.background(Color.Red),
contentAlignment = Alignment.Center
) {
Text(text = "Upload Images", color = Color.White)
}
}
items(items.size) { index ->
Box(
modifier = Modifier
.size(140.dp)
.background(Color.Gray),
contentAlignment = Alignment.Center
) {
Text(text = items[index])
}
}
}
}
Please also note that with recent Compose versions, the LazyVerticalGrid
takes a columns
parameter instead of cells
.
Output: