M3E 设计系统
M3E 设计系统 · androidx.compose.material3
Menus：分组、级联与 Exposed Dropdown1.5.0-alpha25
区分命令菜单、分组菜单、级联菜单与表单选择框，并正确连接 anchor、expanded 和焦点。
最后更新 2026-08-01
Grouped Menu
DropdownMenuGroup 和 MenuGroupShapes 用于形成视觉分组；MenuItemShapes 区分普通与 selected shape。分组是信息结构，不应只靠分隔线堆出来。
Cascading Menu
级联菜单适合有明确层级的命令。源码包含 MenuAnchorPosition 的 Above、Below、Left、Right，用 anchor/window/menu bounds 计算位置。移动端层级过深时应改用页面或对话框。
ExposedDropdownMenu
这是与 TextField 锚定的选择菜单：
ExposedDropdownMenuBox(
expanded = expanded,
onExpandedChange = { expanded = it },
) {
TextField(modifier = Modifier.menuAnchor(...), /* ... */)
ExposedDropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
) { /* items */ }
}anchor type 区分不可编辑主锚点、可编辑主锚点与辅助锚点，影响键盘和无障碍行为。
复制即用
锚定在输入框上的选择菜单：
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExposedDropdownMenuBox
import androidx.compose.material3.ExposedDropdownMenuDefaults
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
@Composable
fun SelectMenu(options: List<String>) {
var expanded by remember { mutableStateOf(false) }
var selected by remember { mutableStateOf(options.first()) }
ExposedDropdownMenuBox(
expanded = expanded,
onExpandedChange = { expanded = it },
) {
OutlinedTextField(
value = selected,
onValueChange = {},
readOnly = true,
label = { Text("选择") },
trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded) },
modifier = Modifier.menuAnchor(),
)
ExposedDropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
) {
options.forEach { option ->
DropdownMenuItem(
text = { Text(option) },
onClick = {
selected = option
expanded = false
},
)
}
}
}
}命令菜单使用 DropdownMenu；分组菜单使用 DropdownMenuGroup + MenuGroupShapes。