如何在Jetpack Compose中实现子菜单功能？

Jetpack Compose 没有内置子菜单组件，我们可以通过嵌套 DropdownMenu 的方式实现和原生安卓一致的子菜单效果，具体实现如下：

效果展示 #

• 包含子菜单的菜单项示例
  
• 点击后展开的子菜单效果
  

完整实现代码 #

@Composable
fun TopAppBarWithSubMenu() {
    // 控制主菜单展开状态
    var mainMenuExpanded by remember { mutableStateOf(false) }
    // 控制子菜单展开状态
    var subMenuExpanded by remember { mutableStateOf(false) }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("子菜单示例") },
                actions = {
                    // 右上角更多按钮，点击弹出主菜单
                    IconButton(onClick = { mainMenuExpanded = true }) {
                        Icon(Icons.Filled.MoreVert, contentDescription = "更多选项")
                    }

                    // 主下拉菜单
                    DropdownMenu(
                        expanded = mainMenuExpanded,
                        onDismissRequest = { mainMenuExpanded = false }
                    ) {
                        // 普通菜单项
                        DropdownMenuItem(
                            text = { Text("普通菜单项1") },
                            onClick = { mainMenuExpanded = false }
                        )
                        
                        // 带子菜单的菜单项
                        DropdownMenuItem(
                            text = { Text("包含子菜单的项") },
                            onClick = { 
                                // 点击不关闭主菜单，仅展开子菜单
                                subMenuExpanded = true 
                            },
                            // 可选：加右侧箭头标识有子菜单
                            trailingIcon = { Icon(Icons.Filled.ArrowRight, contentDescription = null) }
                        ) {
                            // 嵌套子下拉菜单，调整偏移量避免和主菜单重叠
                            DropdownMenu(
                                expanded = subMenuExpanded,
                                onDismissRequest = { subMenuExpanded = false },
                                // 偏移量可根据实际布局调整
                                offset = DpOffset(180.dp, 0.dp)
                            ) {
                                DropdownMenuItem(
                                    text = { Text("子菜单项1") },
                                    onClick = {
                                        // 点击后同时关闭子菜单和主菜单
                                        subMenuExpanded = false
                                        mainMenuExpanded = false
                                    }
                                )
                                DropdownMenuItem(
                                    text = { Text("子菜单项2") },
                                    onClick = {
                                        subMenuExpanded = false
                                        mainMenuExpanded = false
                                    }
                                )
                            }
                        }

                        // 另一个普通菜单项
                        DropdownMenuItem(
                            text = { Text("普通菜单项2") },
                            onClick = { mainMenuExpanded = false }
                        )
                    }
                }
            )
        }
    ) { padding ->
        // 页面内容
        Box(modifier = Modifier.padding(padding))
    }
}

注意事项 #

• 子菜单的offset参数可以根据你的菜单项宽度调整，确保子菜单弹出位置符合预期，不会和主菜单重叠
• 如果需要多层子菜单，继续按照同样的逻辑嵌套DropdownMenu即可
• 可以自定义菜单项的文本、图标、点击逻辑，和普通DropdownMenuItem用法完全一致

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