Jetpack Compose 列中的 fillViewPort 行为答案

【问题标题】：fillViewPort behavior in Jetpack Compose ColumnJetpack Compose 列中的 fillViewPort 行为
【发布时间】：2021-06-11 00:17:28
【问题描述】：

Jetpack Compose Column 中有 ScrollView fillViewPort 之类的东西吗？

看这个例子：

@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")
        }
    }
}

这是结果：

当设备处于横向时，内容被裁剪，因为没有滚动。如果我添加 verticalScroll 修饰符，请执行 Column...

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

...滚动问题已修复，但按钮向上，就像这样。

在传统的工具包中，我们可以使用ScrollView + fillViewPort 属性来解决这个问题。有没有相当于 Compose 的东西？

【问题讨论】：

标签： android android-jetpack-compose

【解决方案1】：

只需更改修饰符的工作顺序... 感谢 Abhishek Dewan（来自 Kotlin Slack 频道）！

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

【讨论】：

从 compose 1.0.2 开始，这不起作用，即使更改了顺序。
我在 compose 1.0.2 上运行了相同的示例，并且仍然为我工作。
我需要在横向模式下使用填充视口，我的所有内容都应该滚动（在纵向我已经使用权重来填充视图）。但是您的解决方案在这种情况下不起作用。

【解决方案2】：

我最近遇到了类似的问题，并用verticalScroll 替换了scrollable(rememberScrollState(), Orientation.Vertical)，这似乎适用于我的情况，并允许屏幕在允许滚动的同时填充其视口

【讨论】：