Hi all! I have a list within a LazyColumn and I do not know how to scroll to an item of the inner li...

# compose

[Jordi Saumell]

Hi all!
I have a list within a LazyColumn and I do not know how to scroll to an item of the inner list. Can someone help me? I add more details in the reply

[Jordi Saumell]

Layout hierarchy:
I have a fragment-based bottom sheet with a custom behavior. I need the root composable to be a LazyColumn to properly handle nested scrolling with the bottom sheet.
Then I have a sticky header, non sticky composables, and a (compose) pager. The pager has a (longish) list in the first page.

Problems I face:
As far as I know there's no way of having a LazyColumn inside of another LazyColumn, currently. I am using a simple column which has two issues.
• Performance, as it keeps all list items in composition. As the list is longer than what fits in the screen but no more than about twice the screen height, it is not currently a big concern.
• I need to scroll to a specific item of the inner list, and I think there is no API for that. This is the main issue.
Explorations:
1. I've read how animateScrollToItem works in LazyColumn and I wanted to replicate it for my case. The problem is that I do not know how can I see which item is the first visible item in the (inner) list.
To know whether the target item is visible I was thinking about using onGloballyPositioned but I don't think it'll be reliable. I am not sure, but I expect the onGloballyPositioned to be called after the scroll takes place, so it will always be at least a frame old. Therefore, I do not know how to do this, if it is even possible...
2. Another possibility is not using a real pager -just the tabs-, and having all composables as items of the parent LazyColumn. But here I think I'd have to sacrifice switching tabs with horizontal scroll, and animating the change of tabs (horizontal animation of the list items). Is there a way of treating some list items as a whole and animating them together when they change?
3. What I intend to do if I don't find a better approach: as all items are of similar height, I can compute the average height of an item, estimate where the item should be based on position in the whole list, and scroll so that it ends up in the middle of the screen instead of the top. It would be preferable at the top, but as the estimation will be unaccurate at the middle the lack of precision will be less of an issue.

Questions:
• Is there a way of having nested LazyColumns of of properly scrolling in case 1?
• Is there a way of treating several list items as a group, as in case 2?
• Any alternative that I missed?

[Albert Chang]

I need the root composable to be a LazyColumn to properly handle nested scrolling with the bottom sheet.

I don't understand this. By nested scrolling do you mean bottom sheet's drag gesture? That doesn't require any scrollable children.

[Jordi Saumell]

I need that when scrolling the content, the bottom sheet goes up up to a certain point, and then it scrolls the content. When going down it scrolls the content and once it reaches the top it moves the sheet (down to a certain point).
To coordinate the scroll of the content (compose), with the coordinatorLayout's behavior (bottom sheet) is where I (think that) I need the nested scroll:

.nestedScroll(nestedScrollInterop)

[Albert Chang]

Ok so you are using the view version of bottom sheet. In that case you need the nested scroll connection but you don’t need a LazyColumn. You can replace it with a Column and apply

Modifier
    .nestedScroll(rememberNestedScrollInteropConnection())
    .scrollable(
        state = remember { ScrollableState(consumeScrollDelta = { 0f }) },
        orientation = Orientation.Vertical
    )

to it.

[Jordi Saumell]

In that case I have the same issues, don't I? All views are in composition, and I don't have a method to scroll to a specific item of the inner list.

[Albert Chang]

No because you can use a LazyColumn in the pager.

[Jordi Saumell]

I tried it and had issues with it. I'll try again later to make sure. In that case, though, if I use the scroll of the LazyColumn will it propagate to the parent column?
I have LazyColumn { sticky header, non sticky item, non sticky pager tab, list }. Intuitively, if I scroll to item of the list will it scroll up the "non sticky item" and "non sticky pager tab"?
Also, I'd loose the ability to use stickyHeader.