https://kotlinlang.org logo
Title
a

Aaron Waller

05/14/2022, 1:44 PM
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()
            }
        }
    }
}
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?
d

Dominaezzz

05/14/2022, 1:58 PM
I think you can get away with it if you set a height between the nested lazycolumns.
a

Aaron Waller

05/14/2022, 2:10 PM
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
Ah lol, so simple. Just changing from FlowColum to FlowRow did the job