Does anyone know how I can put a Horizontal Pager with LazyColums inside a LazyColumn? I want the sa...

# compose

[Aaron Waller]

Does anyone know how I can put a Horizontal Pager with LazyColums inside a LazyColumn?
I want the same as TikTok has it on their Profile screen.

LazyColumn(...) {
    item {
       //Header with ProfilePicture and followers
    }

    stickyHeader {
        TabRow(...) //Sticky TabRow with "Posts" and "Likes"
            } 

    item {
       //Pager with two lists (posts and likes)
        HorizontalPager(...) { page: Int ->
            when (page) {
                0 -> PostList()
                1 -> LikesList()
            }
        }
    }
}

[Aaron Waller]

Obviously this crashes because you cannot have nested LazyColumns and inside my PostList() and LikesList() Composable I have another LazyColum with the content.
Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed. One of the common reasons is nesting layouts like LazyColumn and Column(Modifier.verticalScroll()).
So is it not possible with Jetpack Compose?

[Dominaezzz]

I think you can get away with it if you set a height between the nested lazycolumns.

[Aaron Waller]

I think I have a solution. It works when I put a FlowColum inside my PostList().

val posts = listOf("Item 1", "Item 2", "Item 3", "Item 3", "Item 3", "Item 3", "Item 3", "Item 3", "Item 3", "Item 3", "Item 3")
FlowColumn() {
    repeat(posts.size){
        Box(Modifier.height(70.dp)) {
            Text(posts[it])
        }
    }

}

Now I only have to create a LazyVerticalGrid behaviour out of this FlowColumn

[Aaron Waller]

Ah lol, so simple. Just changing from FlowColum to FlowRow did the job