配置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
相关产品推荐
相关产品推荐

