如何在 Compose 中将垂直滚动项嵌套在另一个垂直滚动项中？

Question

如果我需要将

lazycolumn

放入

lazycolumn

中该怎么办？我收到此错误：

IllegalStateException：测量了垂直可滚动组件 具有无限最大高度限制，这是不允许的。

我知道正如文档所说（https://developer.android.com/develop/ui/compose/lists#avoid-nesting-scrollable），我们必须避免嵌套可沿同一方向滚动的组件。

但是我的应用程序是一个特殊的应用程序，就像一个“应用程序构造函数”，用户可以在其中使用不同类型的项目构建应用程序，例如：文本、图像、垂直滚动容器（

lazycolumns

）、水平滚动容器（

） lazyrows

）等，例如，用户可以自由地放置一个垂直滚动条，带有一些文本和一个水平滚动条，并且该水平滚动条内部可以有一个垂直滚动条。

我需要知道如何实现这一目标

Answer 1

您可以将

LazyColumn

放入另一个

LazyColumn

或任何其他具有

scroll

修饰符的可组合项中，但不能使用

Constraints.Infinity

嵌套可滚动可组合项，因为滚动修饰符会检查传入约束是否具有最大

Constraints.Infinity

。如果你将这个无限的

Constraints.Infinity

更改为有限的值，你可以将一个可滚动的内容放入另一个可滚动的内容中。

将

heightIn(max)

设置为有限变化 maxHeight（这是可测量可组合项的最大高度） 嵌套可滚动可组合项可以在最小-最大之间测量，因此它可以与其内容一样大，或者您可以设置固定高度来限制嵌套可组合，因此不会崩溃

在同方向布局中嵌套可滚动，例如 LazyColumn 和 不允许使用 Column(Modifier.verticalScroll())。如果你想添加一个 项目列表之前的标题请查看 LazyColumn 具有 DSL api 的组件，允许首先通过以下方式添加标头 item() 函数，然后通过 items() 获取项目列表

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/CheckScrollableContainerConstraints.kt;l= 30

@Preview
@Composable
fun ScrollTest() {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {

        item {
            Box(modifier = Modifier.fillMaxWidth().height(200.dp).background(Color.Red))
        }

        item {
            LazyColumn(
                modifier = Modifier
                    // without this modifier crash happens
                    .heightIn(
                        max = Short.MAX_VALUE.toInt().dp
                    ),
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                items(20) {
                    Text(
                        text = "Nested Row $it",
                        modifier = Modifier.fillMaxWidth().padding(16.dp)
                    )
                }
            }
        }

        items(20) {
            Text(
                text = "Outer Row $it",
                modifier = Modifier.fillMaxWidth().padding(16.dp)
            )
        }
    }
}