跳转到内容

WindowDialog

WindowDialog 是一个窗口级对话框组件。它基于平台 Dialog 渲染,无需依赖 ScaffoldCOUIPopupHost。支持大屏优化动效、系统返回手势关闭,以及在内容内部通过组合局部触发关闭。

提示

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

引入

kotlin
import io.github.suqi8.coui.kmp.window.WindowDialog
import io.github.suqi8.coui.kmp.theme.LocalDismissState

基本用法

kotlin
var showDialog by remember { mutableStateOf(false) }

TextButton(
    text = "Open",
    onClick = { showDialog = true }
)

WindowDialog(
    title = "WindowDialog",
    summary = "A basic window-level dialog",
    show = showDialog,
    onDismissRequest = { showDialog = false }
) {
    val dismiss = LocalDismissState.current
    TextButton(
        text = "Confirm",
        onClick = { dismiss?.invoke() },
        modifier = Modifier.fillMaxWidth()
    )
}

属性

WindowDialog 属性

属性名类型说明默认值是否必须
showBoolean是否显示对话框-
modifierModifier根内容修饰符Modifier
titleString?对话框标题null
titleColorColor标题颜色DialogDefaults.titleColor()
summaryString?对话框摘要null
summaryColorColor摘要颜色DialogDefaults.summaryColor()
backgroundColorColor对话框背景色DialogDefaults.backgroundColor()
enableWindowDimBoolean是否启用遮罩层true
onDismissRequest(() -> Unit)?当用户请求关闭(点击遮罩层或返回手势)时触发null
onDismissFinished(() -> Unit)?关闭动画完成后调用;若关闭过程被中途取消(例如 show 被设回 true),则不会触发null
outsideMarginDpSize相对窗口边缘的外部边距DialogDefaults.outsideMargin
insideMarginDpSize内置标题/摘要文本的边距(宽 = 水平内边距,高 = 标题上方内边距);content 插槽不加内边距DialogDefaults.insideMargin
defaultWindowInsetsPaddingBoolean是否应用默认窗口插入内边距(输入法/导航/标题)true
maxWidthDp对话框内容最大宽度DialogDefaults.MaxWidth
largeScreenBoolean?大屏呈现方式覆写(居中缩放/淡入替代底部滑入);为 null 时根据窗口尺寸自动判断null
cornerRadiusDp?圆角半径覆写;为 null 时,居中呈现使用 DialogDefaults.CornerRadius,底部吸附时由屏幕圆角推导(限制在 32dp..48dp)null
content@Composable () -> Unit对话框内容-

DialogDefaults

属性

属性名类型说明
CornerRadiusDp对话框面板圆角(19.dp)
MaxWidthDp对话框内容最大宽度(392.dp)
outsideMarginDpSize对话框外部默认边距(16, 24)
insideMarginDpSize内置标题/摘要文本的默认边距(24, 24);content 插槽不加内边距
ButtonBarMinHeightDp横向对话框按钮栏的最小高度(58.dp)
ButtonBarInsideMarginPaddingValues横向按钮栏中按钮的内边距(水平 24dp、上 12dp、下 22dp);面板底部留白由按钮自身承担
ButtonBarDividerThicknessDp横向按钮栏分割线的粗细(1.dp)
ButtonBarDividerInsetTopDp横向按钮栏分割线的上内缩(17.dp)
ButtonBarDividerInsetBottomDp横向按钮栏分割线的下内缩(21.dp)

函数

函数名返回类型说明
titleColor()Color获取默认标题颜色
summaryColor()Color获取默认摘要颜色
backgroundColor()Color获取默认对话框背景颜色

LocalDismissState

提供一个 (() -> Unit)? 函数,用于从内容内部关闭当前弹窗。这是所有弹出组件提供的统一关闭状态。

kotlin
val dismiss = LocalDismissState.current
TextButton(
    text = "Close",
    onClick = { dismiss?.invoke() }
)

进阶用法

呈现方式覆写

默认情况下,对话框在紧凑窗口中吸附于底部,在大窗口(>= 840dp x 480dp)中居中显示。可通过 largeScreencornerRadiusmaxWidth 覆写呈现方式:

kotlin
var showDialog by remember { mutableStateOf(false) }

WindowDialog(
    show = showDialog,
    title = "Custom Presentation",
    summary = "Forced centered presentation with custom shape",
    largeScreen = true,   // always use the centered scale/fade presentation
    cornerRadius = 24.dp, // override the panel corner radius
    maxWidth = 320.dp,    // narrower content width cap
    onDismissRequest = { showDialog = false }
) {
    val dismiss = LocalDismissState.current
    TextButton(
        text = "OK",
        onClick = { dismiss?.invoke() },
        modifier = Modifier.fillMaxWidth()
    )
}

变更日志

基于 Apache-2.0 许可发布