我从KotlinCompose for Desktop中获取了一个下拉菜单,我想包含一个垂直滚动条。下拉菜单的源代码在这里。他们有一个sample,工作正常,但我不能让它显示垂直滚动条。默认情况下不显示。
还有一个VerticalScrollbar示例,我也尝试过,但我还没有让它与DropdownMenu
一起工作。
将verticalScroll()
放入DropdownMenu(Modifier)
中会导致错误Vertically scrolled component was measured with an infinity maximum height constraints, which is disallowed...
。
在DropdownMenu
下面添加VerticalScrollbar()
会导致错误Can't represent a size of 1073741824 in Constraints
。
所以,据我所知,在DropdownMenu
的Popup
或类似的东西中,有一些东西让我很难做到这一点。
有没有一种方法可以实现可视滚动条?到目前为止我的布局是这样的。(您可以 * 滚动 * 向下到下面的下拉菜单...)
data class Lookup(val id: String, val name: String)
fun main() = application {
Window(
onCloseRequest = ::exitApplication,
state = rememberWindowState(width = 1280.dp, height = 800.dp)
) {
MaterialTheme {
Scaffold {
Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState()),
horizontalAlignment = Alignment.CenterHorizontally
) {
val lookups = LookupService.getLookups() // about 75 items
val (expanded, setExpanded) = remember { mutableStateOf(false) }
val (selected, setSelected) = remember { mutableStateOf<Lookup?>(null) }
Spacer(Modifier.height(20.dp))
Box(Modifier.wrapContentSize(Alignment.TopStart)) {
val icon = if (expanded) {
Icons.Filled.KeyboardArrowUp
} else {
Icons.Filled.KeyboardArrowDown
}
OutlinedTextField(
value = selected?.name ?: "",
onValueChange = { },
modifier = Modifier
.width(360.dp)
.onKeyEvent {
if (it.key == Key.DirectionDown && !expanded) {
setExpanded(true)
return@onKeyEvent true
}
return false
}
.clickable { setExpanded(true) },
singleLine = true,
label = { Text("Select an item") },
trailingIcon = {
Icon(icon, "Select an item", Modifier.clickable {
setExpanded(!expanded)
})
},
enabled = expanded,
colors = TextFieldDefaults.textFieldColors(
disabledTextColor = LocalContentColor.current.copy(LocalContentAlpha.current),
backgroundColor = Color.Transparent
)
)
DropdownMenu( // Desktop version, so it creates a "Popup" per the source code
expanded = expanded,
onDismissRequest = {
runBlocking { // to handle a glitch where the dropdown may "unexpand & expand" again on clicking
delay(200)
setExpanded(false)
}
},
modifier = Modifier
.width(360.dp)
.background(Color.White)
.clip(RoundedCornerShape(5.dp))
// SHOULD HAVE VERTICAL SCROLLBAR SHOW UP AS PART OF THIS DROPDOWNMENU COLUMN
) {
lookups.forEach { lookup ->
DropdownMenuItem(
onClick = {
setExpanded(false)
setSelected(lookup)
}
) {
Text(lookup.name)
}
}
}
}
}
}
}
}
}
1条答案
按热度按时间bejyjqdl1#
我在目前公开的问题Scrollbar doesn't work for DropdownMenu #587中找到了答案。
这就是我如何让我的滚动条在桌面版本的下拉菜单中工作。
1.将此版本的DesktopMenu.desktop.kt复制到项目中。
1.将此版本的Menu.kt复制到项目中。
1.将此卡片添加到您的Menu.kt中,环绕显示内容的
Column
。1.根据问题中的这条评论,将其添加到第3点的
Card
中。1.最后一点是,它会溢出到我的屏幕上方,所以我回到了当前版本的DesktopMenu.desktop.kt,将这个版本的
DesktopDropdownMenuPositionProvider
放回我的DesktopMenu.desktop.kt
中。