https://kotlinlang.org logo
a

Akram Bensalem

09/06/2021, 6:57 PM
I want to add LazyRow, LazyColumn & LazyVerticalGrid inside vertically scrollable column. But when i add LazyVerticalGrid it causes error.
Copy code
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 ?
f

Fredrik Larsen

09/06/2021, 7:59 PM
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.
😞 2
j

Jan Bína

09/06/2021, 9:27 PM
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.
f

Fredrik Larsen

09/07/2021, 6:31 AM
@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
j

Jan Bína

09/07/2021, 6:43 AM
Nope, my suggestion will lazy load all the items. It will look something like this:
Copy code
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?
f

Fredrik Larsen

09/07/2021, 7:36 AM
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.
Thanks, I see you replied to my original question. Sorry for hijacking!
j

Joost Klitsie

09/08/2021, 8:15 AM
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
f

Fredrik Larsen

09/08/2021, 8:49 AM
It may not make sense technically, but it makes sense conceptually 🙂
j

Joost Klitsie

09/08/2021, 8:50 AM
conceptually in what way?
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
which one will scroll when? 🙂 how much of the lazy content can be shown at what time?
that is conceptually wrong
and therefore you can either replace the lazy column for a regular column
or replace the whole scrolling container for something lazy containing different types of elements
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
s

Samuel Rombs

09/08/2021, 5:39 PM
pretty disappointing as flutter has this functionality out of the box. https://api.flutter.dev/flutter/widgets/SliverList-class.html
f

Fredrik Larsen

09/13/2021, 5:05 PM
@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.
3 Views