You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

配置verticalScroll后Compose Column仍无法垂直滚动,求排查方案

问题描述

我尝试通过为Column添加verticalScroll(state = rememberScrollState())修饰符来实现垂直滚动效果。参考JetBrains官方compose-jb仓库的示例后,确认该写法无误,但我的代码中内容仍无法滚动。Column内包含100个Text项,远超默认窗口高度,请问问题出在哪里?

完整代码如下:

@Composable
@Preview
fun App() {
    MaterialTheme {
        // add scroll behaviour
        val stateVertical = rememberScrollState(0)
        Column(modifier = Modifier.verticalScroll(state = stateVertical)) {
            repeat(100){
                Text("item: $it")
            }
        }
    }
}

fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        App()
    }
}
问题原因及解决办法

问题出在Column未被限制高度。在Compose Desktop中,Column默认会根据内容自适应高度,即便添加了verticalScroll修饰符,只要Column能无限制扩展容纳所有内容,滚动就不会触发。

只需给Column的Modifier添加高度约束,让它的高度被限制在窗口范围内,内容超出时就会正常滚动。修改后的代码示例:

@Composable
@Preview
fun App() {
    MaterialTheme {
        val stateVertical = rememberScrollState(0)
        Column(
            modifier = Modifier
                .fillMaxHeight() // 约束Column高度为窗口高度
                .verticalScroll(state = stateVertical)
        ) {
            repeat(100){
                Text("item: $it")
            }
        }
    }
}

fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        App()
    }
}

你也可以用heightIn(max = 400.dp)这类方式指定最大高度,只要Column的高度小于内容总高度,滚动就能正常工作。

内容的提问来源于stack exchange,提问作者VCODE

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.13 14:40:30