如何滚动溢出其内容的 Jetpack Compose 屏幕？

Question

我有一个添加购物清单项目 Jetpack Compose 屏幕，其中包含多个

TextField

输入和底部的图像容器。屏幕在底部溢出并被切断。如何滚动屏幕？

Answer 1

编辑：2023 年 10 月

在这个过程中的某个时刻，这种情况发生了变化，旧的解决方案不再有效。现在这个问题的答案是：

val scrollState = rememberScrollState()
...
Column( // or whatever your parent composable is
    modifier = Modifier
        .verticalScroll(state = scrollState)
) {
    ...
}

旧解决方案

将

Modifier.scrollable(..)

添加到您希望使其可滚动的容器中。 代码会是这样的：

val scrollState = rememberScrollState()
...
Box( // or whatever your parent composable is
    modifier = Modifier
        .scrollable(state = scrollState, orientation = Orientation.Vertical)
) {
    ...
}

当然，还有其他

Modifier

方法可以使可组合项可滚动，可能更适合您的情况。

Answer 2

如果批准的答案不起作用，请尝试如下

val scrollState = rememberScrollState()

Column(
    modifier = Modifier.verticalScroll(state = scrollState)
) { 
    ...
}

不要忘记将其应用到您的父可组合项