跳转到内容

WindowListPopup

WindowListPopup 是一个基于 Dialog 在窗口层级渲染的弹出列表组件。与 SuperListPopup 不同,它不需要 ScaffoldMiuixPopupHost

提示

该组件不依赖 Scaffold,可在任意 Composable 作用域中使用。

引入

kotlin
import top.yukonga.miuix.kmp.extra.WindowListPopup
import top.yukonga.miuix.kmp.basic.ListPopupColumn

基本用法

WindowListPopup 组件可用于在没有 Scaffold 的情况下创建下拉菜单:

kotlin
val showPopup = remember { mutableStateOf(false) }
var selectedIndex by remember { mutableStateOf(0) }
val items = listOf("选项 1", "选项 2", "选项 3")

Box {
    TextButton(
        text = "点击显示菜单",
        onClick = { showPopup.value = true }
    )
    WindowListPopup(
        show = showPopup,
        alignment = PopupPositionProvider.Align.Start,
        onDismissRequest = { showPopup.value = false }
    ) {
        val dismiss = LocalWindowListPopupState.current
        ListPopupColumn {
            items.forEachIndexed { index, string ->
                DropdownImpl(
                    text = string,
                    optionSize = items.size,
                    isSelected = selectedIndex == index,
                    onSelectedIndexChange = {
                        selectedIndex = index
                        dismiss()
                    },
                    index = index
                )
            }
        }
    }
}

属性

WindowListPopup 属性

属性名类型说明默认值
showMutableState<Boolean>控制弹窗的显示状态-
popupModifierModifier应用于弹窗容器的修饰符Modifier
popupPositionProviderPopupPositionProvider提供弹窗的位置计算逻辑ListPopupDefaults.DropdownPositionProvider
alignmentPopupPositionProvider.Align指定弹窗相对于锚点的对齐方式PopupPositionProvider.Align.Right
enableWindowDimBoolean是否在弹窗显示时使背景变暗true
shadowElevationDp弹窗阴影的高度11.dp
onDismissRequest(() -> Unit)?当用户请求关闭(例如点击外部)时触发null
maxHeightDp?弹窗内容的最大高度null
minWidthDp弹窗内容的最小宽度200.dp
content@Composable () -> Unit要在弹窗内显示的内容-

ListPopupColumn 属性

属性名类型说明默认值
content@Composable () -> Unit要在列内显示的列表内容-

PopupPositionProvider.Align

说明
Start将弹窗对齐到锚点的起始端
End将弹窗对齐到锚点的结束端
TopStart将弹窗对齐到锚点的顶部起始端
TopEnd将弹窗对齐到锚点的顶部结束端
BottomStart将弹窗对齐到锚点的底部起始端
BottomEnd将弹窗对齐到锚点的底部结束端

LocalWindowListPopupState

提供一个 () -> Unit 函数,用于从内容内部关闭当前弹窗。

kotlin
val state = LocalWindowListPopupState.current
TextButton(
    text = "关闭",
    onClick = { state.invoke() }
)

变更日志

基于 Apache-2.0 许可发布