fillMaxSize 修改器与 Jetpack Compose 中的 VerticalScroll 结合使用时不起作用

Question

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

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

以下代码无法按预期工作：

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不填满高度

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

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

正如@AjayChandran指出的Modifier.height(IntrinsicSize.Max)，最简单的解决方案是在修饰符后添加verticalScroll。

这个解决方案很简单，但可能会导致性能问题，因为视图内的所有测量都将完成两次。如果您在产品应用程序版本中遇到性能问题，请考虑使用恒定高度 - 请参阅下面的详细说明。

Modifier
    .verticalScroll(scrollState)
    .height(IntrinsicSize.Max)

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

来自fillMaxHeight 文档

如果传入的最大高度为 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

我知道已经晚了，但这似乎对我有用。

Modifier.verticalScroll(scrollState).height(IntrinsicSize.Max)

这将高度扩展到其最大固有尺寸，并且可以垂直滚动。

Answer 3

您可以将布局包装到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))
    }
}