Jetpack compose：可以設置 DropdownMenu 高度以顯示下一個項目

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

我同意這是一個很好的功能，我建議您在 Compose 問題跟蹤器上創建一個功能請求。

這是現在的解決方法，您可以使用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

ps DropdownMenuVerticalPadding是取自源代碼的 Material 常量。