How can I use LazyColumn in LazyColumn in jetpack compose?-CodePudding

I got this error message, And I don't get it.

java.lang.IllegalState

Exception: 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 infinit

e constraints in the hierarchy above the scrolling container.

Here's example code.

@Composable
fun SupplementSearchScreen(
    onSearch: (String) -> List<Vitamin>,
    updateRecentAddedSupplementList: List<Vitamin>
) {

    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
    ) {
        item{
             SupplementSearchResultCard(someList)
        }
    }
}

@Composable
fun SupplementSearchScreen(list:List<SomeList>){
    ContentCard(
        modifier = Modifier.fillMaxWidth()
    ) {
        Text(
            text = "Hello World",
            fontSize = 16.sp,
            color = Color.Black
        )
        LazyColumn(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight()
        ) {
            items(list){ resultItem ->
                SearchResultItem(resultItem)
            }
        }
    }
}

What's wrong here?

CodePudding user response：

Lazy column needs fixed height component as parent to achieve lazy behavior, if add lazy column inside parent with modifier Modifier.verticalScroll() or another Lazy column it will get infinite height it wont be able to decide when to compose and when to dispose an composable, instead use items{} of block of lazy column

in xml also same issue appears if wrap recyclerview inside nested scroll view but in xml instead of showing error it cause ANR as items increases in Recycler view adapter

CodePudding user response：

You can't directly use LazyColumn inside LazyColumn. Just use LazyColumn with different types like this:

sealed interface Item {

    data class SearchCard(val name: String) : Item

    data class SearchText(val name: String): Item
}

@Composable
fun SearchScreen(list: List<Item>) {
    LazyColumn {
        items(list.size) { index ->
            when (list[index]) {
                is Item.SearchCard -> TODO()
                is Item.SearchText -> TODO()
            }
        }
    }
}