Is there a way to have multiple `LazyColumn` s within a scrolling `Column`/other container? :thread:

# compose

[David Albers]

Is there a way to have multiple LazyColumn s within a scrolling `Column`/other container? 🧵

[David Albers]

I’d like to achieve something like this

@Composable
fun NestedExample() {
    Column(
        Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
    ) {
        SearchResults(query = "A")
        SearchResults(query = "B")
    }
}

@Composable
fun SearchResults(query: String) {
    val results = MutableList(100) { "$query $it" } // could come from an API in the future
    LazyColumn {
        items(results) {
            Text(it)
        }
    }
}

[David Albers]

basically: a root Column which scrolls and `Composable`s within it which may or may not have LazyColumn

[pepos]

https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/package-summary

[David Albers]

If I used NestedScroll , I’d have to measure each “sublist” and calculate their offset manually right?

[pepos]

did you think about merging both SearchResults in one single LazyColumn?

[pepos]

it would be easier than you want to achieve

[David Albers]

Yep, I’ve thought about that and kind of gone back and forth between it. I’d need to move the results = logic up to the root Composable so they could be combined.
However, I’d like to keep that logic contained within SearchResults so I could easily use it across other screens. I’m pretty sure if I go that route, a LazyColumn inside Column isn’t a great idea anyway though!