Nested Listing in Jetpack Compose

Question

I'm trying to structure my composables this way:

Column ->   
    Tab(Child)
    HorizontalPager (Child)->   
         LazyColumn (Child of Horizontal Pager)

I want to have a toolbar with (scroll | enterAlways) attribute, then a tablayout under, then a list below the tablayout.

I tried this structure but I'm getting this error

java.lang.IllegalStateException: 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()). If you want to add a header before the list of items please add a header as a separate item() before the main items() inside the LazyColumn scope.

This is the structure of what I currently have:

Box( 
   Modifier
     .fillMaxSize()
     .nestedScroll(nestedScrollConnection) 
) { 
    Column(){
       TabRow(
         
       ) {       
       }
                                     
       HorizontalPager(

       ) {
           LazyColumn {
           }   
       }
   }

   TopAppBar()
}

Is there any alternative way to achieve a nested Lazycolumn inside a HorizontalPager and the HorizontalPager will have Column as it's parent?

You can check out this answer. https://stackoverflow.com/questions/75190976/how-to-achieve-multiple-header-and-body-elements-list-for-a-lazycolumn-in-compos/75219930#75219930. You can't measure a LazyColumn with an infinite max height so you need to limit it to a finite number. Modifier.heightIn(max) will limit it while you still can assign height to your LazyColumn between 0 and max height set in modifier — Thracian, Feb 02 '23 at 20:56
remove nestedScroll(nestedScrollConnection) ，Example : LazyRow(modifier = Modifier, userScrollEnabled = false) — Halifax, Feb 03 '23 at 02:25
check this out maybe it might help [nested columns in compose](https://stackoverflow.com/questions/73165390/vertically-scrollable-component-was-measured-with-an-infinity-maximum-height-con/75525836#75525836) — Michael I., Feb 22 '23 at 15:43

ceviche · Answer 1 · 2023-02-03T09:08:52.457

0

I gave the below code a try in android studio and did not have any crashes.

Box( 
   Modifier
     .fillMaxSize()
     .nestedScroll(nestedScrollConnection) 
) { 
    Column(){
       TabRow() { }                 
       HorizontalPager() {
           LazyColumn (modifier = Modifier.Height(200.dp)) {
           }   
       }
   }
   TopAppBar()
}

edited Feb 03 '23 at 09:08

answered Feb 03 '23 at 03:13

ceviche

36
4

I was able to get it working without changing anything. Weirdly, I couldn't reproduce the crash again. This approach works fine now – Mike Mar 06 '23 at 10:21

Nested Listing in Jetpack Compose

1 Answers1