OverlayIconCascadingDropdownMenu

OverlayIconCascadingDropdownMenu 是基于 IconButton 的封装，点击图标按钮后会展开 OverlayCascadingListPopup。适用于工具栏的 action 槽位（例如 TopAppBar 的右侧动作按钮）——单个图标按钮展开后呈现一组带子菜单的项。DropdownItem.children 非空的项会成为子菜单触发行；级联深度限制为 2 级。

使用前提

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

引入

kotlin

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

基本用法

将 OverlayIconCascadingDropdownMenu 放在 TopAppBar（或 SmallTopAppBar）的 actions 槽中，点击图标即可展开弹出框。children 非空的顶层项会带 chevron，点击后就地展开二级菜单。

kotlin

var sortIndex by remember { mutableStateOf(0) }
var viewIndex by remember { mutableStateOf(0) }
var filterIndex by remember { mutableStateOf(0) }

val sortLabels = listOf("按拍摄日期排序", "按添加日期排序")
val viewLabels = listOf("按日期分组", "紧凑视图")
val filterLabels = listOf("全部内容", "相机相册")

val entries = listOf(
    DropdownEntry(
        items = sortLabels.mapIndexed { idx, label ->
            DropdownItem(
                text = label,
                selected = sortIndex == idx,
                onClick = { sortIndex = idx },
            )
        },
    ),
    DropdownEntry(
        items = listOf(
            DropdownItem(
                text = "查看模式",
                children = viewLabels.mapIndexed { idx, label ->
                    DropdownItem(
                        text = label,
                        selected = viewIndex == idx,
                        onClick = { viewIndex = idx },
                    )
                },
            ),
            DropdownItem(
                text = "筛选",
                children = filterLabels.mapIndexed { idx, label ->
                    DropdownItem(
                        text = label,
                        selected = filterIndex == idx,
                        onClick = { filterIndex = idx },
                    )
                },
            ),
        ),
    ),
)

Scaffold(
    topBar = {
        SmallTopAppBar(
            title = "图库",
            actions = {
                OverlayIconCascadingDropdownMenu(entries = entries) {
                    Icon(imageVector = MiuixIcons.Tune, contentDescription = "调整")
                }
            }
        )
    }
) { padding ->
    // 页面内容
}

单 Entry 重载

只需要一个分组时，可以使用 entry 重载省略外层的 listOf(...)。

kotlin

val entry = DropdownEntry(
    items = listOf(
        DropdownItem(
            text = "查看模式",
            children = listOf(
                DropdownItem(text = "按日期分组", onClick = { /* ... */ }),
                DropdownItem(text = "紧凑视图", onClick = { /* ... */ }),
            ),
        ),
        DropdownItem(text = "刷新", onClick = { /* ... */ }),
    ),
)

Scaffold {
    OverlayIconCascadingDropdownMenu(entry = entry) {
        Icon(imageVector = MiuixIcons.Tune, contentDescription = "调整")
    }
}

组件状态

禁用状态

kotlin

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

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

级联深度

级联深度上限为 2。二级菜单中的项不会再处理自己的 children；更深层的子树会被静默忽略。

属性