如何为Jetpack Compose的DropdownMenu添加滚动条？滚动监听遇阻

直接替换DropdownMenu内部的默认Column为带Scrollbar的LazyColumn即可解决问题，核心思路是利用LazyColumn的可监听滚动状态，配合官方Scrollbar组件实现滚动提示，同时保留DropdownMenu的原有交互逻辑。

实现步骤及代码示例 #

1. 定义必要的状态变量：

val scrollState = rememberLazyListState()
val isMenuExpanded = remember { mutableStateOf(false) }
// 模拟超过菜单高度的长列表项
val menuItems = (1..25).map { "选项 $it" }

2. 构建TextField与带自定义滚动条的DropdownMenu：

TextField(
    value = "",
    onValueChange = {},
    modifier = Modifier.fillMaxWidth(),
    trailingIcon = {
        IconButton(onClick = { isMenuExpanded.value = !isMenuExpanded.value }) {
            Icon(Icons.Filled.ArrowDropDown, contentDescription = "展开/收起菜单")
        }
    }
)

DropdownMenu(
    expanded = isMenuExpanded.value,
    onDismissRequest = { isMenuExpanded.value = false },
    // 限制菜单最大高度，触发滚动逻辑
    modifier = Modifier.heightIn(max = 320.dp)
) {
    // 用Scrollbar包裹LazyColumn，关联滚动状态
    Scrollbar(
        modifier = Modifier.fillMaxHeight(),
        scrollState = scrollState
    ) {
        LazyColumn(
            state = scrollState,
            modifier = Modifier.fillMaxWidth()
        ) {
            items(menuItems) { item ->
                DropdownMenuItem(
                    onClick = {
                        isMenuExpanded.value = false
                        // 此处添加选项点击后的业务逻辑
                    }
                ) {
                    Text(text = item)
                }
            }
        }
    }
}

关键说明 #

• 替换默认Column为LazyColumn：DropdownMenu内部默认使用Column+verticalScroll，但无法直接监听滚动状态；LazyColumn的LazyListState可以被Scrollbar直接绑定，原生支持滚动状态追踪。
• 限制菜单最大高度：通过heightIn(max = ...)给DropdownMenu设置最大高度，当列表项总高度超过该值时，LazyColumn自动启用滚动。
• 滚动条自动显示/隐藏：Scrollbar组件会根据滚动状态自动出现，用户能直观感知到菜单内容可滚动，无需额外提示。

内容的提问来源于stack exchange，提问作者Mardann