I want to add LazyRow, LazyColumn & LazyVerticalGrid inside vertically scrollable column. But wh...

# compose

[Akram Bensalem]

I want to add LazyRow, LazyColumn & LazyVerticalGrid inside vertically scrollable column.
But when i add LazyVerticalGrid it causes error.

java.lang.IllegalStateException: Nesting scrollable in the same direction layouts like ScrollableContainer and LazyColumn is not allowed. If you want to add a header before the list of items please take a look on LazyColumn component which has a DSL api which allows to first add a header via item() function and then the list of items via items().

Any help ?

[Fredrik Larsen]

I posted a similar question earlier today https://kotlinlang.slack.com/archives/CJLTWPH7S/p1630933491339200

I haven't concluded yet, but it's not looking promising.

[Jan Bína]

That whole screen can be one big LazyColumn , LazyRow will then be its first item and items from your LazyColumn will be the last items. For the LazyGrid, take a look at its source code - it's just a LazyColumn with some special stuff inside - take that code and add it directly to your top level LazyColumn.

[nglauber]

I answered a similar question… I hope it helps you…
https://stackoverflow.com/questions/66908737/what-is-the-equivalent-of-nestedscrollview-recyclerview-or-nested-recyclerv/66913480#66913480

[Fredrik Larsen]

@Jan Bína @nglauber Thanks for the input. Both my use case and the OP mention LazyColumn for a reason. The items cannot be loaded all at ones. Correct me if I’m wrong, but your suggestions would both load all content at ones. What mechanism would lazy load the last column? Thanks

[Jan Bína]

Nope, my suggestion will lazy load all the items. It will look something like this:

LazyColumn {
  item { LazyRow {} }

  item {
    Row {
      Text("First grid item")
      Text("Second grid item")
      Text("Third grid item")
    }
  }

  item {
    Row {
      Text("4th grid item")
      Text("5th grid item")
      Text("6th grid item")
    }
  }

  item { Text("First item from bottom lazy column") }
  item { Text("Second item from bottom lazy column") }
}

The only trickier part is creating items for the grid, for this, refer to LazyVerticalGrid source code, you will have to copy its implementation. Is it clear now?

[Fredrik Larsen]

I’m not sure we’re on the same page, but I’ll dig some more based on your suggestions. I can’t see how each “module” here (row/column) can paginate independently.

[Fredrik Larsen]

Thanks, I see you replied to my original question. Sorry for hijacking!

[Joost Klitsie]

Adding a lazy column within a scrollable vertical container does not make any sense, the lazy column will never be lazy in that case. Use either a normal column, or make the parent layout a lazy column or lazy vertical grid and fit your elements like that

[Fredrik Larsen]

It may not make sense technically, but it makes sense conceptually 🙂

[Joost Klitsie]

conceptually in what way?

[Joost Klitsie]

the scoll container needs a fixed height for its content, then you put in another scroll container with a non-fixed height for its content

[Joost Klitsie]

which one will scroll when? 🙂 how much of the lazy content can be shown at what time?

[Joost Klitsie]

that is conceptually wrong

[Joost Klitsie]

and therefore you can either replace the lazy column for a regular column

[Joost Klitsie]

or replace the whole scrolling container for something lazy containing different types of elements

[Joost Klitsie]

like horizontal scrollable item, 3 items next to each other, fully width items, or perhaps you can fix it all up with a lazy vertical grid as well

[Samuel Rombs]

pretty disappointing as flutter has this functionality out of the box. https://api.flutter.dev/flutter/widgets/SliverList-class.html

[Fredrik Larsen]

@Joost Klitsie I'm not trying to argue. I see how it can be solved using the approach above. However, conceptually it's simple. And the concept has nothing to do with implementation 🙂

It can be solved by using nested scrolling. This is possible on iOS and Flutter. How can it be done? Well, the nested vertically scrolling module can scroll internally when it covers the viewport (screen/container). This way when you scroll up again it scrolls internally until it has reached the top. It then stops consuming scroll events and the parent takes over.