Jetpack compose LazyColumn inside LazyCloumn

Question

In my homepage I have a lazycolumn which one of items is Horizontal pager. Inside each horizontal pager there are some pages that I need to have lazyColumn inside them too. and the error is that you are not allowed to use nested scrolling in same direction. How should I implement this ui?

@Composable fun Home() { LazyColumn { item { } item { } item { } item { TabRow(selectedTabIndex =) { } } item { HorizontalPager(count =) { page -> when { page == 0 -> { LazyColumn { items(list) { } } } } } } } }

Sergei S · Accepted Answer · 2021-12-18 10:19:47Z

I created an example. For me it works as expected. Please take a look

class ComposeActivity8 : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposeTutorialTheme { Home() } } } @Composable fun VItem(text: String) { Text(modifier = Modifier.padding(40.dp), text = text) Divider(color = Color.Black) } @Composable fun HItem(content: @Composable BoxScope.() -> Unit) { Box { content() Divider( color = Color.Red, modifier = Modifier .align(Alignment.CenterEnd) .fillMaxHeight() .width(1.dp) ) } } @Composable fun CreateLazyColumn(pos: String, countItem: Int) { LazyColumn { items(count = countItem, itemContent = { index -> VItem("$pos.$index") }) } } @Composable fun Home() { LazyColumn { item { VItem("Vertical item 1") } item { VItem("Vertical item 2") } item { VItem("Vertical item 3") } item { VItem("Vertical item 4") } item { LazyRow(modifier = Modifier.height(150.dp)) { item { HItem { CreateLazyColumn("Horizontal item 5.1", 6) } } item { HItem { CreateLazyColumn("Horizontal item 5.2", 10) } } item { HItem { Text( modifier = Modifier.padding(40.dp), text = "Horizontal item 5.3" ) } } item { HItem { Text( modifier = Modifier.padding(40.dp), text = "Horizontal item 5.4" ) } } item { HItem { CreateLazyColumn("Horizontal 5.5", 6) } } item { HItem { Text( modifier = Modifier.padding(40.dp), text = "Horizontal item 5.6" ) } } item { HItem { Text( modifier = Modifier.padding(40.dp), text = "Horizontal item 5.7" ) } } item { HItem { Text( modifier = Modifier.padding(40.dp), text = "Horizontal item 5.8" ) } } } Divider(color = Color.Black) } item { VItem("Vertical item 6") } item { VItem("Vertical item 7") } item { VItem("Vertical item 8") } item { VItem("Vertical item 9") } item { VItem("Vertical item 10") } item { VItem("Vertical item 11") } item { VItem("Vertical item 12") } } } }

VIDEO

Just as a note, it only allowed to bypass error, but the reason why that error exists in the first place is still relevant: embedded LazyColumn essentially lost it's laziness and became wrap_content. To make an actual LazyColumn inside LazyColumn, you have to use CoordinatorLayout with custom behavior logic

Collectives™ on Stack Overflow

Jetpack compose LazyColumn inside LazyCloumn

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related