Nesting of Lazy Column in Jetpack compose gives crash, I searched through Internet but I didn't find any solution for the crash?

Question

I have a list of Pair<String,ArrayList<>> . Here main list is list of all direcotry name and in each directory there is list of files in it. so In compose I want to design UI design where Folder name followed by its content and after content second pair will follow in same way.

But when I try to do using nested column It gives crash , here is stack trace.

FATAL EXCEPTION: main Process: com.project.gallery, PID: 3528 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. There are could be other reasons for this to happen: your ComposeView was added into a LinearLayout with some weight, you applied Modifier.wrapContentSize(unbounded = true) or wrote a custom layout. Please try to remove the source of infinite constraints in the hierarchy above the scrolling container. at androidx.compose.foundation.CheckScrollableContainerConstraintsKt.checkScrollableContainerConstraints-K40F9xA(CheckScrollableContainerConstraints.kt:35)

Here is my code

@Composable
fun ImageScreen(modifier: Modifier = Modifier) {

    val viewModel: MainViewModel = hiltViewModel()
    val imagesState by viewModel.imageList.collectAsState()
    val list = imagesState.toList()

    LazyColumn(
        modifier = modifier.fillMaxSize(),
    ) {
        items(list) { directoryWithList ->
            Text(text = directoryWithList.first)
            LazyVerticalStaggeredGrid(columns =StaggeredGridCells.Fixed(2)){
                items(directoryWithList.second){image->
                    ImageItem(modifier = Modifier.clickable {}, image = image)
                }

            }
        }
//        item(imagesState.keys.toList()) {}
    }

}
                                                                                                    
 

                                                                                               

I tried to search on internet and stackOverflow but I found that we cannot nest Lazy Column , but my need requires nesting, so how we can do it, is there any alternative way to do this without using any third party library .

Answer 1

You're attempting to expand another vertical view by adding a scrollable vertical view to it. Because the parent was unable to determine the child's height (which is infinite due to the vertical scroll), an IllegalStateException was thrown.

In your situation, creating a tree view is the best course of action. A custom column that receives a list of nodes, each of which may have a list of child nodes, and makes the list repeating is possible.