Jetpack Compose中Column的fillViewPort行为

Question

有没有类似于 Jetpack Compose 的 Column 中的 ScrollView fillViewPort？请看这个示例：

Is there something like ScrollView fillViewPort in Jetpack Compose Column?

See this example:

@Composable
fun FillViewPortIssue() {
    Column(
        Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        for (i in 0..5) {
            Box(
                modifier = Modifier
                    .padding(vertical = 8.dp)
                    .background(Color.Red)
                    .fillMaxWidth()
                    .height(72.dp)
            )
        }
        Spacer(modifier = Modifier.weight(1f))
        Button(
            modifier = Modifier.fillMaxWidth(),
            onClick = { /*TODO*/ }
        ) {
            Text("Ok")
        }
    }
}

这是结果：

当设备处于横屏模式时，内容会被裁剪，因为没有滚动条。 如果我给Column添加verticalScroll修饰符...

    ...
    Column(
        Modifier
            .verticalScroll(rememberScrollState()) // <<-- this
            .fillMaxSize()
            .padding(16.dp)
    ) {
    ...

...滚动条问题已经解决，但按钮向上移动了，就像这样。

在传统的工具包中，我们可以使用 ScrollView + fillViewPort 属性来解决此问题。Compose 中有类似的东西吗？

- nglauber

Answer 1

只需要更改修饰符的顺序即可…感谢来自Kotlin Slack频道的Abhishek Dewan的帮助！

Column(
    Modifier
        .fillMaxSize() // first, set the max size
        .verticalScroll(rememberScrollState()) // then set the scroll
) {

- nglauber

---

截至Compose 1.0.2版本，即使更改顺序，这也无法正常工作。 - HRJ

我在Compose 1.0.2上运行了相同的示例，仍然可以正常工作。 - nglauber

我需要在横屏模式下使用fill Viewport，使得所有内容都可以滚动（在竖屏模式下，我已经使用了weight来填充视图）。但是你的解决方案在这种情况下不起作用。 - Shamsul Arafin Mahtab

如果您需要填充最后一个元素到底部的所有空间，则应使用权重1f而不是fillMaxSize。 - user924

Answer 2

最近我也遇到了类似的问题，我将 scrollable(rememberScrollState(), Orientation.Vertical) 替换为了 verticalScroll ，解决了我的问题，并使屏幕可以填充其视口而允许滚动。

- alfietap

---

不知怎么的，这对我来说是有效的，而被接受的答案却不行。然而，在这种情况下，滚动需要手动处理 :( - Lingviston