具有verticalScroll修饰符的Column内的LazyColumn抛出异常

Question

In one of my composables, a Lazycolumn is nested inside a Column composable. I want to be able to scroll the entire Column along with the Lazycolumn . But, specifying the verticalScroll modifier property on Column results in the following exception causing the app to crash. How can I fix this?

Exception

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()).

Composable

Column(
    modifier = Modifier
        .fillMaxWidth()
        .verticalScroll(rememberScrollState())
        .padding(bottom = 100.dp),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    LazyColumn(
        modifier = Modifier
            .fillMaxWidth()
    ) {
        items(
            items = allItems!!,
            key = { item ->
                item.id
            }
        ) { item ->
            ShoppingListScreenItem(
                navController = navController,
                item = item,
                sharedViewModel = sharedViewModel
            ) { isChecked ->
                scope.launch {
                    shoppingListScreenViewModel.changeItemChecked(item!!, isChecked)
                }
            }
        }
    }

   ...

Button(
    modifier = Modifier.padding(vertical = 24.dp),
    onClick = {
        navController.navigate(NavScreens.AddItemScreen.route) {
            popUpTo(NavScreens.AddItemScreen.route) {
                inclusive = true
            }
        }
    }
) {
    Text("Go to add item screen")
  }
}

Answer 1

This happens when you wish to measure your LazyColumn with Constraints with Constraints.Infinity for the maxHeight which is not permitted as described in error log. There should be a fixed height or you shouldn't have another Scrollable with same orientation.

Column(
    modifier = Modifier
         // This is the cause
        .verticalScroll(rememberScrollState())
) {
    LazyColumn(
       // and not having a Modifier that could return non-infinite max height contraint
        modifier = Modifier
            .fillMaxWidth()
    ) {

}

If you don't know exact height you can assign Modifier.weight(1f) to LazyColumn.

Contraints

This section is extra about `Constraints` and measurement you can skip this part if you are not interested in how it works

What i mean by measuring with with Constraints.Infinity is

when you create a Layout in Compose you use

measurable.measure(constraints)

then you get child Composables as measurables and each one as

Modifier.fillMaxWidth()

These constraints change based on your size modifier. When there is a scroll and you don't use any Size modifier Constraints return minHeight =0, maxHeight= some big number i don't recall.

Modifier.fillMaxWidth().weight(1f)

 Modifier.fillMaxWidth().weight(1f)

Easiest way to check Constraints with different Modifiers or with scroll is getting it from BoxWithConstraints