屏幕旋转后Dialog适配可用宽度及点击外部关闭的实现方案

问题分析 #

需要实现两个核心需求：

• Dialog在横竖屏时都占满可用宽度（默认Dialog宽度固定，横竖屏一致）
• 点击Dialog左右预留的32dp区域时关闭Dialog

之前的方案设置usePlatformDefaultWidth = true并在Surface添加32.dp内边距，存在两个问题：

• Surface的内边距属于Dialog内容区域，点击该区域不会触发onDismissRequest（仅点击Dialog外部区域才会触发）
• 无法让Dialog真正占满可用宽度

解决方案 #

通过取消平台默认宽度限制，自定义Dialog内容布局，将左右32dp区域设置为可点击关闭的独立容器，中间放置实际内容：

代码示例 #

Dialog(
    onDismissRequest = { viewModel.showDialog(null) },
    properties = DialogProperties(usePlatformDefaultWidth = false), // 取消固定宽度限制
) {
    Row(
        modifier = Modifier.fillMaxWidth(), // 占满可用宽度
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        // 左侧32dp可关闭区域
        Box(
            modifier = Modifier
                .width(32.dp)
                .clickable { viewModel.showDialog(null) }
        )

        // 中间Dialog实际内容区域
        Surface(modifier = Modifier.wrapContentWidth()) {
            // 替换为你的Dialog内容
            Text("Dialog Content")
        }

        // 右侧32dp可关闭区域
        Box(
            modifier = Modifier
                .width(32.dp)
                .clickable { viewModel.showDialog(null) }
        )
    }
}

方案说明 #

1. 取消固定宽度：设置usePlatformDefaultWidth = false，让Dialog不再使用平台预设的固定宽度，允许内容布局控制整体宽度
2. 满宽布局：用Row作为根容器并设置fillMaxWidth()，确保Dialog占满屏幕可用宽度，横竖屏自动适配
3. 可关闭区域：左右两个Box固定宽度为32.dp，设置clickable触发关闭逻辑，满足设计预留的点击关闭需求
4. 内容隔离：中间的Surface包裹实际内容，点击内容区域不会触发关闭，保证交互正常

如果需要左右区域随屏幕宽度自适应（而非固定32dp），可以将width(32.dp)替换为weight(1f)，让左右区域平分剩余空间，中间内容居中显示。

内容的提问来源于stack exchange，提问作者Psijic