Jetpack Compose如何将DropDownItem点击状态提升到DropDownMenu实现点击关闭菜单

核心思路是给OverflowMenu的插槽参数增加关闭菜单的回调传递能力，不需要把showMenu状态上浮到TopBar层破坏OverflowMenu的封装性，实现步骤如下：

1. 修改OverflowMenu的插槽参数定义 #

把原本无参数的content插槽，改成接收onDismissMenu回调作为入参，把OverflowMenu内部控制菜单关闭的逻辑暴露给子组件：

@Composable
fun OverflowMenu(
    // 其他自定义参数按需保留，比如图标样式、菜单位置等
    content: @Composable (onDismissMenu: () -> Unit) -> Unit
) {
    var showMenu by remember { mutableStateOf(false) }
    // 统一的关闭菜单逻辑
    val onDismissMenu = { showMenu = false }

    // 原有触发菜单展开的控件逻辑，比如更多按钮
    IconButton(onClick = { showMenu = true }) {
        Icon(Icons.Default.MoreVert, contentDescription = "更多操作")
    }

    DropdownMenu(
        expanded = showMenu,
        onDismissRequest = onDismissMenu,
        // 其他DropdownMenu原有参数保留
    ) {
        // 把关闭回调传给插槽内的子组件
        content(onDismissMenu)
    }
}

2. TopBar调用时把关闭回调传递给各个下拉子项 #

在OverflowMenu的content插槽中拿到onDismissMenu回调，在每个子项的点击事件中先执行业务逻辑，再调用回调关闭菜单：

@Composable
fun CustomTopBar() {
    TopAppBar(
        title = { Text("应用标题") },
        actions = {
            OverflowMenu { onDismissMenu ->
                SettingsDropDownItem(
                    onClick = {
                        // 原有设置项点击逻辑
                        navigateToSettingsPage()
                        // 调用关闭菜单
                        onDismissMenu()
                    }
                )
                ModeDropDownItem(
                    onClick = {
                        // 原有模式切换逻辑
                        toggleDarkMode()
                        onDismissMenu()
                    }
                )
                LogoutDropDownItem(
                    onClick = {
                        // 原有登出逻辑
                        showLogoutConfirm()
                        onDismissMenu()
                    }
                )
            }
        }
    )
}

可选优化：封装公共下拉项组件减少重复代码 #

如果所有下拉项点击后都需要关闭菜单，可以抽一个公共包装层自动处理关闭逻辑：

@Composable
fun BaseMenuDropDownItem(
    onDismissMenu: () -> Unit,
    onItemClick: () -> Unit,
    content: @Composable () -> Unit
) {
    DropdownMenuItem(
        onClick = {
            onItemClick()
            onDismissMenu()
        },
        content = content
    )
}

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