OverlayDropdownMenu

OverlayDropdownMenu 是基于 BasicComponent 的封装，点击后会展开 OverlayDropdownPopup。与 OverlayDropdownPreference 不同，它不再持有单一的选中索引——选中状态完全保存在每个 DropdownItem 的 selected 与 onClick 上。适用于动作菜单、多选菜单，或弹出项之间不构成单选互斥关系的场景。

使用前提

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

引入

kotlin

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

基本用法

传入单个 DropdownEntry 即可显示一个基础下拉菜单行：

kotlin

var selectedIndex by remember { mutableStateOf(0) }
val entry = DropdownEntry(
    items = listOf("选项 1", "选项 2", "选项 3").mapIndexed { index, text ->
        DropdownItem(
            text = text,
            selected = selectedIndex == index,
            onClick = { selectedIndex = index },
        )
    }
)

Scaffold {
    OverlayDropdownMenu(
        title = "下拉菜单",
        entry = entry
    )
}

分组菜单

传入 List<DropdownEntry> 即可显示由分割线隔开的多个分组。collapseOnSelection 默认为 entries.size <= 1，多分组场景下选中后弹出框保持打开以便连续选择。

kotlin

var sizeIndex by remember { mutableStateOf(0) }
var colorIndex by remember { mutableStateOf(0) }
val entries = listOf(
    DropdownEntry(
        items = listOf("小", "中").mapIndexed { index, text ->
            DropdownItem(text = text, selected = sizeIndex == index, onClick = { sizeIndex = index })
        }
    ),
    DropdownEntry(
        items = listOf("红色", "绿色", "蓝色").mapIndexed { index, text ->
            DropdownItem(text = text, selected = colorIndex == index, onClick = { colorIndex = index })
        }
    )
)

Scaffold {
    OverlayDropdownMenu(
        title = "分组菜单",
        entries = entries,
        collapseOnSelection = false
    )
}

多选

选中状态保存在 DropdownItem.selected 上，可以同时选中多个条目，在每个条目的 onClick 中切换选中状态即可。

kotlin

var selected by remember { mutableStateOf(setOf("A1", "B2")) }
val entries = listOf(
    DropdownEntry(
        items = listOf("A1", "A2").map { text ->
            DropdownItem(
                text = text,
                selected = text in selected,
                onClick = {
                    selected = if (text in selected) selected - text else selected + text
                }
            )
        }
    ),
    DropdownEntry(
        items = listOf("B1", "B2", "B3").map { text ->
            DropdownItem(
                text = text,
                selected = text in selected,
                onClick = {
                    selected = if (text in selected) selected - text else selected + text
                }
            )
        }
    )
)

Scaffold {
    OverlayDropdownMenu(
        title = "多选菜单",
        entries = entries,
        collapseOnSelection = false
    )
}

监听展开状态

kotlin

var expanded by remember { mutableStateOf(false) }
val entry = DropdownEntry(
    items = listOf("选项 1", "选项 2", "选项 3").map { DropdownItem(text = it) }
)

Scaffold {
    OverlayDropdownMenu(
        title = "监听展开",
        summary = if (expanded) "展开" else "收起",
        entry = entry,
        onExpandedChange = { expanded = it }
    )
}

组件状态

禁用状态

kotlin

OverlayDropdownMenu(
    title = "禁用菜单",
    summary = "此菜单当前不可用",
    entry = DropdownEntry(items = listOf(DropdownItem(text = "选项 1"))),
    enabled = false
)

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

属性