OverlayIconDropdownMenu

OverlayIconDropdownMenu 是基于 IconButton 的封装，点击图标按钮后会展开 OverlayDropdownPopup。适用于工具栏的 action 槽位，例如 TopAppBar 的右侧动作按钮——单个图标按钮展开后呈现一组动作、排序选项或筛选开关。

使用前提

此组件依赖 Scaffold 提供的 MiuixPopupHost 以显示弹出内容。必须在 Scaffold 中使用，否则弹出内容无法正常渲染。

引入

kotlin

import top.yukonga.miuix.kmp.menu.OverlayIconDropdownMenu
import top.yukonga.miuix.kmp.basic.DropdownEntry
import top.yukonga.miuix.kmp.basic.DropdownItem

基本用法

将 OverlayIconDropdownMenu 放在 TopAppBar（或 SmallTopAppBar）的 actions 槽中，点击图标即可展开弹出框。这是最典型的使用场景——工具栏上的一个图标按钮，展开后呈现一组菜单项。

kotlin

val entry = DropdownEntry(
    items = listOf("编辑", "复制", "分享", "删除").map { text ->
        DropdownItem(text = text, onClick = { /* 处理动作 */ })
    }
)

Scaffold(
    topBar = {
        SmallTopAppBar(
            title = "收件箱",
            actions = {
                OverlayIconDropdownMenu(entry = entry) {
                    Icon(imageVector = MiuixIcons.Edit, contentDescription = "动作菜单")
                }
            }
        )
    }
) { padding ->
    // 页面内容
}

也可以将 OverlayIconDropdownMenu 用在 TopAppBar 之外的位置——只要外层位于 Scaffold 中，任何能放 IconButton 的地方都能放它。

排序 / 单选

对于排序菜单或单选场景，在每个 DropdownItem 上设置 selected，并保持 collapseOnSelection = true（entry 重载的默认值），让弹出框在每次选中后自动关闭。

kotlin

var sortIndex by remember { mutableStateOf(0) }
val entry = DropdownEntry(
    items = listOf("名称", "日期", "大小").mapIndexed { index, text ->
        DropdownItem(text = text, selected = sortIndex == index, onClick = { sortIndex = index })
    }
)

Scaffold {
    OverlayIconDropdownMenu(entry = entry) {
        Icon(imageVector = MiuixIcons.Sort, contentDescription = "排序")
    }
}

多选

用一个 Set 跟踪选中值，在每个条目的 onClick 中切换状态，并设置 collapseOnSelection = false 让弹出框在多次选择之间保持打开。

kotlin

var selected by remember { mutableStateOf(setOf("照片")) }
val entry = DropdownEntry(
    items = listOf("照片", "视频", "文件").map { text ->
        DropdownItem(
            text = text,
            selected = text in selected,
            onClick = {
                selected = if (text in selected) selected - text else selected + text
            }
        )
    }
)

Scaffold {
    OverlayIconDropdownMenu(entry = entry, collapseOnSelection = false) {
        Icon(imageVector = MiuixIcons.SelectAll, contentDescription = "多选")
    }
}

分组菜单

传入 entries: List<DropdownEntry> 即可显示由分割线隔开的多个分组。

kotlin

val entries = listOf(
    DropdownEntry(items = listOf("条目 A-1", "条目 A-2").map { DropdownItem(text = it) }),
    DropdownEntry(items = listOf("条目 B-1", "条目 B-2", "条目 B-3").map { DropdownItem(text = it) })
)

Scaffold {
    OverlayIconDropdownMenu(entries = entries) {
        Icon(imageVector = MiuixIcons.MoreCircle, contentDescription = "更多")
    }
}

组件状态

禁用状态

kotlin

OverlayIconDropdownMenu(
    entry = DropdownEntry(items = listOf(DropdownItem(text = "选项 1"))),
    enabled = false
) {
    Icon(imageVector = MiuixIcons.MoreCircle, contentDescription = "更多")
}

当所有 DropdownEntry 都不包含任何条目时，菜单也会被隐式禁用。

属性