在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
相关产品推荐
相关产品推荐

