与 Jetpack Compose 中的 VerticalScroll 结合使用时，fillMaxSize 修饰符不起作用

Question

我尝试查找此内容，但找不到任何相关内容。

我想在可垂直滚动的Box 内有一个“全尺寸”Column，而这种组合似乎不起作用。当我将verticalScroll(rememberScrollState()) 修饰符添加到Box 时，它似乎“禁用”了Column 的fillMaxSize() 修饰符

以下代码没有按预期工作：

MyTheme {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .border(2.dp, Color.Green) //for visual effect only
                .verticalScroll(rememberScrollState())
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(2.dp)
                    .border(2.dp, Color.Red) //for visual effect only
            ) {
               //some content
            }
        }
}

预期结果：Box 和 Column（绿色和红色边框）都填满了整个屏幕。

实际结果： Box 填满屏幕，但Column 没有填满高度

但是，如果我从 Box 中删除 verticalScroll() 修饰符，我会得到预期的结果：

MyTheme {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .border(2.dp, Color.Green) //for visual effect only
                //verticalScroll modifier removed
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(2.dp)
                    .border(2.dp, Color.Red) //for visual effect only
            ) {
               //some content
            }
        }
}

Answer 1

verticalScroll包裹了内容的高度，可以拉伸到很长，所以范围有Constraints.Infinity对于maxHeight的约束。

来自fillMaxHeightdocumentation

如果传入的最大高度是 Constraints.Infinity，则此修饰符将无效。

这就是为什么你需要明确设置height。

考虑切换到LazyColumn（具有此确切用途的fillParentMaxHeight()）或Pager（明确用于此类情况）。

另外，作为@AdrianK 指针，使用常规scrollable，您可以使用BoxWithConstraints 包裹您的视图，并使用maxHeight 设置您的视图的height。

BoxWithConstraints {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .border(2.dp, Color.Green)
            .verticalScroll(rememberScrollState())
    ) {
        Column {
            repeat(2) {
                Column(
                    modifier = Modifier
                        // fillMaxWidth instead of fillMaxSize
                        .fillMaxWidth()
                        // explicit height modifier
                        .height(this@BoxWithConstraints.maxHeight)
                        .padding(2.dp)
                        .border(2.dp, Color.Red)
                ) {
                    //some content
                }
            }
        }
    }
}

结果：

Answer 2

您可以将您的布局包装成一个BoxWithConstraints，它不可滚动并从那里获取大小：

BoxWithConstraints {
    val pageSize = this.maxHeight // already provided as Dp value
    Box(
        modifier = Modifier
            .fillMaxSize()
            .border(2.dp, Color.Green) //for visual effect only
            .verticalScroll(rememberScrollState())
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .height(pageSize)
                .padding(2.dp)
                .border(2.dp, Color.Red) //for visual effect only
        ) {
            //some content
        }
        // just so we can scroll a bit further
        Spacer(modifier = Modifier.padding(top = pageSize).fillMaxWidth().height(72.dp))
    }
}