有没有办法在 Jetpack Compose 的垂直可滚动视图中嵌套 LazyVerticalGrid

Question

I'm trying to show a LazyGrid of items within a main screen that has a scrollable content.

I tried to set up the screen as follows:

@Composable
fun MainScreen(){

    ConstraintLayout(Modifier.verticalScroll(remeberScrollState())) {
    
    val (view, rowView, image, gridView) = createRefs()

    Row(){
    //view
}
    Row (){
    //rowView (a lazy row)
}
    Row() {
    //image
}
    Row() {
    //gridView
   }
 }


}

Compose had no issue with the other views but once I included the grid view, I had this error:

java.lang.IllegalStateException: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed. One of the common reasons is nesting layouts like LazyColumn and Column(Modifier.verticalScroll()). If you want to add a header before the list of items please add a header as a separate item() before the main items() inside the LazyColumn scope. There are could be other reasons for this to happen: your ComposeView was added into a LinearLayout with some weight, you applied Modifier.wrapContentSize(unbounded = true) or wrote a custom layout. Please try to remove the source of infinite constraints in the hierarchy above the scrolling container.

The LazyVerticalGrid is set up like so:

list : List<Object>

LazyVerticalGrid( cells = GridCells.Fixed(2), content = {

items(list.size) { index ->

Card(){...}

}
})

Is there a way to nest a LazyVerticalGrid within any layout that is vertically scrollable?

Answer 1

simple example:

ConstraintLayout(Modifier.verticalScroll(rememberScrollState())){
    LazyVerticalGrid( cells = GridCells.Fixed(2),Modifier.height(150.dp)){
        items(5){
            Text(text = "hello")
        }
    }
}

When a list is nested, the internal list needs to be fixed in height