Jetpack compose:可以设置下拉菜单的高度，以显示下一个项目

Question

我在Jetpack Compose中使用DropdownMenu，但我有一个问题，很多用户不理解菜单包含更多信息，所以他们可以滚动列表。我得到了很多支持，他们在清单上遗漏了一些东西。特别是在某些语言中，它很好地对齐了项目的高度，所以你不会看到有更多的项目。

是否有一种方法可以自动设置下拉菜单的高度(无论语言)，以便它在底部显示项目的一半，以便用户理解他们可以滚动列表?

我使用以下修饰符创建菜单:

DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
modifier = Modifier.requiredSizeIn(maxHeight = 330.dp)
) {
items.forEachIndexed { index, item ->
DropdownMenuItem(onClick = {
onSelected(index, item.data)
selectedIndex = index
expanded = false
}) {
...
}

Answer 1

我同意这是一个很好的功能，我建议你在撰写问题跟踪器上创建一个功能请求。

现在有一个解决方法，你可以使用Modifier.onSizeChanged来获得你的项目高度，并像这样更新你的maxHeight约束:

@Composable
fun TestScreen(
) {
var expanded by remember { mutableStateOf(true) }
val items = List(10) { it.toString() }
val itemHeights = remember { mutableStateMapOf<Int, Int>() }
val baseHeight = 330.dp
val density = LocalDensity.current
val maxHeight = remember(itemHeights.toMap()) {
if (itemHeights.keys.toSet() != items.indices.toSet()) {
// if we don't have all heights calculated yet, return default value
return@remember baseHeight
}
val baseHeightInt = with(density) { baseHeight.toPx().toInt() }
// top+bottom system padding
var sum = with(density) { DropdownMenuVerticalPadding.toPx().toInt() } * 2
for ((i, itemSize) in itemHeights.toSortedMap()) {
sum += itemSize
if (sum >= baseHeightInt) {
return@remember with(density) { (sum - itemSize / 2).toDp() }
}
}
// all items fit into base height
baseHeight
}
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
modifier = Modifier.requiredSizeIn(maxHeight = maxHeight)
) {
items.forEachIndexed { index, item ->
DropdownMenuItem(
onClick = {
onSelected(index, item.data)
selectedIndex = index
expanded = false
},
modifier = Modifier.onSizeChanged {
itemHeights[index] = it.height
}
) {
Text("Hello $index", modifier = Modifier.padding(30.dp))
}
}
}
}
private val DropdownMenuVerticalPadding = 8.dp

注。DropdownMenuVerticalPadding是取自源代码的Material常数。