Hello, I have multiple LazyRows inside a LazyColumn. I would like to be able to scroll one of the La...

# compose

[Shawn Tucker]

Hello, I have multiple LazyRows inside a LazyColumn. I would like to be able to scroll one of the LazyRows and that the others will scroll as well. How can I achieve it?
I have tried using rememberLazyListState() but with not luck (Only the last LazyRow scrolled, the others stayed)

[Shawn Tucker]

video.mp4

[Nabeel]

Only a suggestion, If you can place LazyColumns inside LazyRow then it would be achievable.

Be aware that this works only if you don't want to scroll vertically at same time.

[Shawn Tucker]

Yes, but then I will not be able to include my expanded state per Row @Nabeel

[Nabeel]

Oh! Didn't know that sorry.
Have you tried using same list state for every LazyRow?

[Shawn Tucker]

I did, but I guess I did it incorrectly, because when I did, only the last row scrolled.

[Nabeel]

Can you please post the code

[Shawn Tucker]

LazyColumn(Modifier
    .height(230.dp)
    .border(2.dp, Color.Red)) {
    item {
        var expanded by remember { mutableStateOf(false) }
        LazyRow {
            stickyHeader { Item("HEADER") }
            item { Item("TEST1") { expanded = !expanded } }
            ...
        }
        AnimatedVisibility(visible = expanded) {
            Box(modifier = Modifier
                .fillMaxWidth()
                .height(40.dp)
                .background(Color.Red)) {}
        }
    }
    item {
        LazyRow {
            stickyHeader { Item("HEADER") }
            item { Item("TEST1") }
            ...
        }
    }
    item {
        LazyRow {
            stickyHeader { Item("HEADER") }
            item { Item("TEST1") }
            ...
        }
    }
    item {
        LazyRow {
            stickyHeader { Item("HEADER") }
            item { Item("TEST1") }
            ...
        }
    }
    item {
        LazyRow {
            stickyHeader { Item("HEADER") }
            item { Item("TEST1") }
            ...
        }
    }
    item {
        LazyRow {
            stickyHeader { Item("HEADER") }
            item { Item("TEST1") }
            ...
        }
    }
}

This is a quick sample. I tried to add

val state = rememberLazyListState()

and share it with all my LazyRows. and I tried observing only one and updating the other rows states but that also failed

[Dominaezzz]

You can't share LazyListState like that sadly, it has some unique stuff in there that can't be shared. What you probably want is to use Modifier.nestedScroll .

[Shawn Tucker]

Okay, thanks! I will give it a try