具有verticalScroll修飾符的Column內的LazyColumn拋出異常

Question

在我的一個可組合組件中， Lazycolumn嵌套在Column可組合組件內。 我希望能夠與Lazycolumn一起滾動整個Column 。 但是，在Column上指定verticalScroll modifier屬性會導致以下異常導致應用程序崩潰。 我怎樣才能解決這個問題？

例外

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

可組合的

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

當您希望使用Constraints測量您的LazyColumn時，會發生這種情況， Constraints.Infinity是不允許的，如錯誤日志中所述。 應該有一個固定的高度，或者你不應該有另一個具有相同方向的 Scrollable。

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

}

如果您不知道確切的高度，可以將Modifier.weight(1f)分配給 LazyColumn。

約束

本節是關於“約束”和測量的額外內容，如果您對它的工作原理不感興趣，可以跳過這部分

我用 Constraints.Infinity 測量的意思是

當您在 Compose 中創建布局時，您使用

measurable.measure(constraints)

然后你得到子 Composables 作為可測量的，每個作為

Modifier.fillMaxWidth()

這些約束會根據您的大小修改器而變化。 當有滾動並且您不使用任何大小修飾符時，約束返回 minHeight =0，maxHeight= 一些我不記得的大數字。

Modifier.fillMaxWidth().weight(1f)

 Modifier.fillMaxWidth().weight(1f)

使用不同修飾符或滾動檢查Constraints的最簡單方法是從BoxWithConstraints