You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

在Jetpack Compose中创建嵌套菜单有什么更简单易用的实现方式?

Jetpack Compose 嵌套下拉菜单实现方案

Compose 中实现嵌套下拉菜单不需要沿用XML的层级预定义思路,直接在父菜单项内声明子菜单、通过状态控制展开即可,代码示例如下:

import androidx.compose.foundation.Arrangement
import androidx.compose.foundation.Box
import androidx.compose.foundation.Row
import androidx.compose.foundation.hoverable
import androidx.compose.foundation.interaction.rememberHoverableState
import androidx.compose.material.Button
import androidx.compose.material.DropdownMenu
import androidx.compose.material.DropdownMenuItem
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowRight
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp

@Composable
fun NestedMenuDemo() {
    // 父菜单展开状态
    var parentMenuOpen by remember { mutableStateOf(false) }
    // 子菜单展开状态,多嵌套层级可以定义多个状态变量
    var subMenuOpen by remember { mutableStateOf(false) }

    Box {
        // 触发菜单弹出的入口按钮
        Button(onClick = { parentMenuOpen = true }) {
            Text("显示菜单")
        }
        
        // 一级菜单
        DropdownMenu(
            expanded = parentMenuOpen,
            onDismissRequest = { parentMenuOpen = false }
        ) {
            DropdownMenuItem(onClick = { 
                // 处理点击逻辑,点击后关闭菜单
                parentMenuOpen = false 
            }) {
                Text("首页")
            }
            // 带嵌套子菜单的菜单项
            DropdownMenuItem(
                onClick = {},
                modifier = Modifier.hoverable(rememberHoverableState { hovered ->
                    // 悬停时展示子菜单,也可以修改为点击触发
                    subMenuOpen = hovered
                })
            ) {
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    Text("内容管理")
                    Icon(Icons.Default.ArrowRight, contentDescription = null)
                }
                // 二级子菜单,调整偏移量展示在当前菜单项右侧
                DropdownMenu(
                    expanded = subMenuOpen,
                    onDismissRequest = { subMenuOpen = false },
                    offset = DpOffset(190.dp, 0.dp)
                ) {
                    DropdownMenuItem(onClick = {
                        // 处理点击逻辑,点击后关闭所有菜单
                        subMenuOpen = false
                        parentMenuOpen = false
                    }) {
                        Text("文章管理")
                    }
                    DropdownMenuItem(onClick = {
                        subMenuOpen = false
                        parentMenuOpen = false
                    }) {
                        Text("评论管理")
                    }
                }
            }
            DropdownMenuItem(onClick = { parentMenuOpen = false }) {
                Text("设置")
            }
        }
    }
}

这种实现方式可以支持无限层级嵌套,只需要在对应子菜单项内继续声明下一级DropdownMenu即可,交互逻辑也可以按需自定义为点击、长按等触发方式,比XML实现更灵活。
如果使用Material3组件,仅需要替换组件的导入包即可,核心逻辑完全一致。

内容的提问来源于stack exchange,提问作者Omar El Hussein

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.01 05:27:02