android - 具有 VerticalScroll 修饰符的 Column 内的 LazyColumn 会引发异常

Question

在我的一个可组合项中，Lazycolumn 嵌套在 Column 可组合项中。我希望能够将整个Column 与Lazycolumn 一起滚动。但是，在 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

当您希望测量您的 LazyColumn 时，就会发生这种情况与 Constraints与 Constraints.Infinity对于 maxHeight，如错误日志中所述，这是不允许的。应该有一个固定的高度，否则您不应该有另一个具有相同方向的可滚动。

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 进行测量的意思是当您创建 Layout 时在 Compose 中您使用

Layout(modifier=modifier, content=content){
     measurables: List<Measurable>, constraints: Constraints ->
}

您获得的子可组合项为 List<Measurable>您可以使用 Constraints 进行测量由家长或您认为合适的人提供，通过使用 Constraints.copy 更新现有的人来提供或者当您使用 Layout 构建自定义可组合项时修复一个问题.

val placeable = measurable.measure(constraints)

约束min/max width/height根据大小修改器或滚动进行更改。当有滚动且不使用任何大小修饰符时，Constraints返回 minHeight =0，maxHeight= Int.MAX_VALUE 为 Constraints.Infinity

Modifier.fillMaxWidth()

Modifier.fillMaxWidth().weight(1f)

最简单的检查方法Constraints使用不同的修饰符或使用滚动从 BoxWithConstraints 获取它