主页 / coding / 问题 / 79177673
Accepted
NullPointerException
Asked: 2024-11-11 20:36:56 +0800 CST

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

  • 772

lazycolumn如果我需要将 a 放入a 内，该怎么办lazycolumn？我收到此错误：

IllegalStateException：垂直滚动组件的最大高度限制为无穷大，这是不允许的。

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

但是我的应用程序是一个特殊的应用程序，就像一个“应用程序构造函数”，用户可以使用不同类型的项目构建应用程序，例如：文本、图像、垂直滚动容器（lazycolumns）、水平滚动容器（lazyrows）等，例如，用户可以自由放置垂直滚动条，其中包含一些文本和水平滚动条，并且水平滚动条内部可以有一个垂直滚动条。

我需要知道如何实现这一点

1 个回答

  1. Best Answer

    您可以将 放入LazyColumn另一个LazyColumn或任何其他带有scroll修饰符的 Composable 中，但您不能嵌套可滚动的 Composable 和Constraints.Infinity滚动方向上的最大宽度/高度等于 的约束，因为滚动修饰符会检查传入的约束是否具有最大值Constraints.Infinity。如果您将这个无限值更改Constraints.Infinity为有限值，则可以将一个可滚动的 Composable 放入另一个可滚动的 Composable 中。

    设置heightIn(max)为有限变化 maxHeight（这是 Composable 可以测量的最大高度）嵌套的可滚​​动 Composable 可以在最小值和最大值之间进行测量，因此它可以与其内容一样大，或者您可以设置固定高度来限制嵌套 Composable，这样它就不会崩溃

    java.lang.IllegalStateException：垂直滚动组件的最大高度限制为无穷大，这是不允许的。常见原因之一是嵌套布局，如 LazyColumn 和 Column(Modifier.verticalScroll())。如果您想在项目列表之前添加标题，请在 LazyColumn 范围内的主要项目（）之前将标题作为单独的 item（）添加。发生这种情况的原因可能还有其他：您的 ComposeView 被添加到具有一定权重的 LinearLayout 中，您应用了 Modifier.wrapContentSize(unbounded = true) 或编写了自定义布局。请尝试移除滚动容器上方层次结构中无限约束的来源。

    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(
            // This number is an arbitrary height for demonstration, you can use screen height or 
           // another number to limit how big this LazyColumn should be
                        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)
            )
        }
    }
}

    编辑

    这个最大数字表示高度LazyColumn。它越大，一次可以组合的项目就越多，并且它就越不懒惰，更像带滚动条的列。

    LazyColumn(
    modifier = Modifier
        // without this modifier crash happens
        .heightIn(
            max = Short.MAX_VALUE.toInt().dp
        ),
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    items(2000) {

        LaunchedEffect(Unit) {
            println("Recomposing item: $it")
        }
        
        Text(
            text = "Nested Row $it",
            modifier = Modifier.fillMaxWidth().padding(16.dp)
        )
    }
}

    在我的模拟器上 Composes 582。这就是为什么我分享的链接中有一个关于性能的警告。

    当您不知道 LazyColumn 的长度为 5-10 个项目时，这种方法很有用，并且使用大数字来测量它在 0 和某个大数字之间的高度以获取内容高度，或者将具有少量项目的 LazyGrid 放入 LazyColumn 中，而不是自己实现它。

    当您希望将一个 LazyList 放入另一个 LazyList 中时，请考虑这样一个事实：其视口的大小和它所组成的项目数量也会发生变化。

    • 3

相关问题