Nested Lazy Column in JetpackCompose

1.9k Views Asked by At

I want to use the lazy column under the lazy column and have a vertical scroll view in it. While using the vertical scroll in it, I had issues. Can anyone help me create a Nested Scroll view?

  • Lazy column under lazy column
  • Need to have vertical scroll in which container other body section also

Issues which i have face while using lazy column under lazy column.[![Error Image][1]][1]

@Composable
fun NestedColumn() {

    LazyColumn() {

        item { }

        items(200){
            Text(text = "This is Inner Nested")

            LazyColumn(){

                item {  }

                items(50) {
                    Text(text = "This is Inner inner Nested")
                }
            }

        }
    }
}```


  [1]: https://i.stack.imgur.com/1lTkD.png


Error Message:

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.
2

There are 2 best solutions below

1
Nirav Rangapariya On

I suggested to you that you should handle it another way as it's not a professional way to handle nested lazy columns.

  • You can handle it with a set fixed height to one of the lazy columns
  • Handle with just one Lazy column and manage with item{} and items{} in it.
0
Baudelio Andalon On

Just need add FlowColumn from Compose and don't you need add another Column inside your contained Itementer image description here