Akram Bensalem

    Akram Bensalem

    1 year ago
    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

    Fredrik Larsen

    1 year ago
    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

    Jan Bína

    1 year ago
    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.
    Fredrik Larsen

    Fredrik Larsen

    1 year ago
    @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

    Jan Bína

    1 year ago
    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

    Fredrik Larsen

    1 year ago
    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

    1 year ago
    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

    Fredrik Larsen

    1 year ago
    It may not make sense technically, but it makes sense conceptually 🙂
    j

    Joost Klitsie

    1 year ago
    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
    Samuel Rombs

    Samuel Rombs

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

    Fredrik Larsen

    1 year ago
    @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.