Jetpack Compose - No possibilit to create a nested LazyColumns

Question

Following problem: I created a Compose View which should display a item list (it also should display more things in future development).

I created following view:

data class ItemHolder(
    val header: String,
    val subItems: List<String>,
    val footer: String
)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Create items
        val items = (1..20).map { itemIndex ->
            ItemHolder(
                header = "Header of $itemIndex",
                subItems =  (1..30).map { subItemIndex ->
                    "Sub item $subItemIndex of $itemIndex"
                },
                footer = "Footer of $itemIndex"
            )
        }

        setContent {
            Column(
                modifier = Modifier.verticalScroll(rememberScrollState())
            ) {
                Text(text = "Items:")
                ItemList(items = items)
            }
        }
    }
}

// Displays the list of items
@Composable
fun ItemList(items: List<ItemHolder>) {
    LazyColumn {
        items(items = items) {
            Item(item = it)
        }
    }
}

// Displays a single item
@Composable
fun Item(item: ItemHolder) {
    var subItemsVisible by remember { mutableStateOf(false) }

    // Displays the header of the item
    Row {
        Text(text = item.header)
        Button(
            onClick = { subItemsVisible = !subItemsVisible },
            content = {
                Text(text = if (subItemsVisible) "Hide" else "Show")
            }
        )
    }

    // Displays the sub items of the item
    AnimatedVisibility(visible = subItemsVisible) {
        Column {
            for (subItem in item.subItems) {
                Text(text = subItem)
            }
        }
    }

    // Displays the footer of the item
    Text(text = item.footer)
}

I found out that the problem is, that the outer Column (which is scrollable) contains the LazyColumn which contains the actual items.

I get following error:

java.lang.IllegalStateException: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed.

I was searching around for hours, but didn't find any suitable solution for my problem. How can I fix this?

Well, this solved my Problem but then the advantages of LazyColumn get lost. — Daniel, Feb 06 '23 at 11:40
Simply don't measure your LazyColumn with `Constraints.Infinity`. One way to overcome this is to use `Modifier.heightIn(max=...)` to change infinite max Height to something finite while not giving your LazyColumn a fixed height but biggest height it can be measured with. https://stackoverflow.com/a/75219930/5457853 Other one is to add everything in `item` and/or `items`like structure to have one lazyColumn with single or multiple items while using one LazyColumn — Thracian, Feb 06 '23 at 17:21

Heet Changela · Answer 1 · 2023-02-07T06:29:26.220

I think you have to remove modifier = Modifier.verticalScroll(rememberScrollState()) it will not work with nested lazy column

refer this link may be help you :https://proandroiddev.com/nested-scroll-with-jetpack-compose-9c3b054d2e12

I edit your code I hope it will help you

data class ItemHolder(
    val header: String,
    val subItems: List<String>,
    val footer: String
)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val items = (1..4).map { itemIndex ->
            ItemHolder(
                header = "Header of $itemIndex",
                subItems = (1..30).map { subItemIndex ->
                    "Sub item $subItemIndex of $itemIndex"
                },
                footer = "Footer of $itemIndex"
            )
        }

        setContent {
            LazyColumn(
                modifier = Modifier.padding(10.dp)
            ) {
                item {
                    Text(text = "Items: Header", color = Color.Red, fontSize = 20.sp)
                    Spacer(modifier = Modifier.height(20.dp))
                }
                items(items = items) {
                    Item(item = it)
                }
                item {
                    Spacer(modifier = Modifier.height(20.dp))
                    Text(text = "Items: Footer", color = Color.Red, fontSize = 20.sp)
                    Spacer(modifier = Modifier.height(20.dp))
                }
                items(items = items) {
                    Item(item = it)
                }
            }
        }
    }
}


// Displays a single item
@Composable
fun Item(item: ItemHolder) {
    var subItemsVisible by remember { mutableStateOf(false) }

    // Displays the header of the item
    Row {
        Text(text = item.header)
        Button(
            onClick = { subItemsVisible = !subItemsVisible },
            content = {
                Text(text = if (subItemsVisible) "Hide" else "Show")
            }
        )
    }

    // Displays the sub items of the item
    AnimatedVisibility(visible = subItemsVisible) {
        Column {
            for (subItem in item.subItems) {
                Text(text = subItem)
            }
        }
    }

    // Displays the footer of the item
    Text(text = item.footer)
}

This would solve my problem, but then the view isn't scrollable anymore (when adding other elements above or below the list). — Daniel, Feb 06 '23 at 11:41
Try one thing instead of Column directly use LazyColumn and use items() and item() property of LazyColumn to manage your view. — Heet Changela, Feb 07 '23 at 06:04

score 1 · Answer 2 · answered Apr 19 '23 at 15:19

1

Simply you can replace LazyColumn by Column as follows:

// Displays the list of items
@Composable
fun ItemList(items: List<ItemHolder>) {
    Column {
        items.indices.forEach { i ->
            Item(item = items[i])
        }
    }
}

answered Apr 19 '23 at 15:19

Pillocron

141
1
6

Jetpack Compose - No possibilit to create a nested LazyColumns

2 Answers2

Linked