跳转到内容

WindowDropdownMenu ​

WindowDropdownMenu 是基于 BasicComponent 的封装,点击后会展开 WindowDropdownPopup(通过 Dialog 在窗口级别渲染)。与 WindowDropdownPreference 不同,它不再持有单一的选中索引——选中状态完全保存在每个 DropdownItem 的 selected 与 onClick 上。适用于动作菜单、多选菜单,或弹出项之间不构成单选互斥关系的场景。

引入 ​

kotlin
import top.yukonga.miuix.kmp.menu.WindowDropdownMenu
import top.yukonga.miuix.kmp.basic.DropdownEntry
import top.yukonga.miuix.kmp.basic.DropdownItem

基本用法 ​

传入单个 DropdownEntry 即可显示一个基础下拉菜单行,无需 Scaffold:

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 },
        )
    }
)

WindowDropdownMenu(
    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 })
        }
    )
)

WindowDropdownMenu(
    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
                }
            )
        }
    )
)

WindowDropdownMenu(
    title = "多选菜单",
    entries = entries,
    collapseOnSelection = false
)

监听展开状态 ​

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

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

组件状态 ​

禁用状态 ​

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

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

属性 ​

WindowDropdownMenu 属性(Entries 重载) ​

属性名类型说明默认值是否必须
entriesList<DropdownEntry>由分割线隔开的下拉选项分组-是
titleString菜单行的标题-是
modifierModifier应用于组件的修饰符Modifier否
titleColorBasicComponentColors标题文本的颜色配置BasicComponentDefaults.titleColor()否
summaryString?菜单的摘要说明null否
summaryColorBasicComponentColors摘要文本的颜色配置BasicComponentDefaults.summaryColor()否
dropdownColorsDropdownColors下拉选项的颜色配置DropdownDefaults.dropdownColors()否
startAction@Composable (() -> Unit)?左侧显示的自定义内容null否
bottomAction@Composable (() -> Unit)?底部显示的自定义内容null否
insideMarginPaddingValues组件内部内容的边距BasicComponentDefaults.InsideMargin否
maxHeightDp?下拉菜单的最大高度null否
enabledBoolean组件是否可交互true否
collapseOnSelectionBoolean每次选中后是否关闭弹出框entries.size <= 1否
onExpandedChange((Boolean) -> Unit)?展开状态变化时的回调null否

Entry 重载属性 ​

属性名类型说明默认值是否必须
entryDropdownEntry单个下拉选项分组-是
collapseOnSelectionBoolean选中后是否关闭弹出框true否

其余参数与上方 entries 重载完全一致。

属性名类型说明默认值是否必须
itemsList<DropdownItem>此分组中显示的条目-是
enabledBoolean此分组是否启用。为 false 时禁用整组条目;为 true 时仍会遵循每个条目的 enabled 状态true否
属性名类型说明默认值是否必须
textString选项显示的文本-是
enabledBoolean选项是否可点击,禁用时置灰true否
selectedBoolean选项是否处于选中状态false否
onClick(() -> Unit)?点击选项时触发的回调null否
icon@Composable ((Modifier) -> Unit)?显示在选项文本前的图标null否
summaryString?显示在选项文本下方的摘要文本null否
childrenList<DropdownItem>?可选的子菜单项;仅级联变体null否
属性名类型说明
contentColorColor选项标题颜色
summaryColorColor选项摘要颜色
containerColorColor选项背景颜色
selectedContentColorColor选中项标题颜色
selectedSummaryColorColor选中项摘要颜色
selectedContainerColorColor选中项背景颜色
selectedIndicatorColorColor选中指示图标颜色

变更日志

基于 Apache-2.0 许可发布