如何实现类似Gmail与Sync for Reddit的Android Compose对话框效果？

我想实现类似Sync和Gmail应用中的自定义位置对话框，但尝试调整AlertDialog位置的方案后，既达不到预期外观，还丢失了点击外部关闭对话框的功能（这两款应用都保留了该功能）。目前用的自定义Modifier方案不够规范且效果差，怀疑是否应该使用Dialog/AlertDialog之外的组件。

当前代码实现如下：

if (openDialog) {
    AlertDialog(
        onDismissRequest = {
            menuStatus = !menuStatus
            openDialog = !openDialog
            expanded = !expanded
        },
        shape = RoundedCornerShape(10.dp),
        confirmButton = { null },
        text = {
            Column() {
                Row() {
                    Text(text = "Account Management")
                }
                Spacer(modifier = Modifier.padding(16.dp))
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Icon(
                        painter = painterResource(id = R.drawable.baseline_logout_24),
                        contentDescription = null,
                        modifier = Modifier
                            .padding(end = 8.dp)
                    )
                    Text(text = "Sign out", )
                }
            }
        },
        modifier = Modifier
            .customDialogModifier(CustomDialogPosition.TOP)
    )
}

enum class CustomDialogPosition {
    BOTTOM, TOP
}

fun Modifier.customDialogModifier(pos: CustomDialogPosition) = layout { measurable, constraints ->

    val placeable = measurable.measure(constraints);
    layout(constraints.maxWidth, constraints.maxHeight) {
        when (pos) {
            CustomDialogPosition.BOTTOM -> {
                placeable.place(0, constraints.maxHeight - placeable.height, 10f)
            }
            CustomDialogPosition.TOP -> {
                placeable.place(0, 150, 10f)
            }
        }
    }
}

解决方案：用基础Dialog组件实现自定义位置对话框 #

AlertDialog内部布局逻辑固定，自定义位置容易破坏其默认交互（比如点击外部关闭），更推荐使用基础Dialog组件配合自定义布局，既能灵活控制位置，又能保留系统默认行为。

示例代码

if (openDialog) {
    Dialog(
        onDismissRequest = {
            menuStatus = !menuStatus
            openDialog = !openDialog
            expanded = !expanded
        }
    ) {
        // 全屏背景层，支持点击外部关闭
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.TopCenter
        ) {
            // 点击背景触发关闭
            Box(
                modifier = Modifier
                    .matchParentSize()
                    .clickable {
                        menuStatus = !menuStatus
                        openDialog = !openDialog
                        expanded = !expanded
                    }
            )

            // 自定义对话框内容卡片
            Card(
                shape = RoundedCornerShape(10.dp),
                modifier = Modifier
                    .padding(top = 150.dp)
                    .clickable(enabled = false) {}, // 避免内容区域触发关闭
                elevation = 8.dp
            ) {
                Column(modifier = Modifier.padding(16.dp)) {
                    Row(modifier = Modifier.padding(bottom = 16.dp)) {
                        Text(text = "Account Management")
                    }
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        Icon(
                            painter = painterResource(id = R.drawable.baseline_logout_24),
                            contentDescription = "Sign out",
                            modifier = Modifier.padding(end = 8.dp)
                        )
                        Text(text = "Sign out")
                    }
                }
            }
        }
    }
}

关键要点

• 基础Dialog：默认支持onDismissRequest，配合全屏背景的点击事件，完美保留点击外部关闭的功能
• 位置控制：通过Box的contentAlignment和padding精准控制对话框的位置（示例中为顶部居中，距离顶部150dp）
• 内容隔离：给Card设置clickable(enabled = false)，避免点击对话框内容时触发关闭逻辑
• 外观自定义：通过Card的shape、elevation等属性轻松调整对话框样式，更贴近Sync/Gmail的设计

为什么不推荐修改AlertDialog的Modifier

AlertDialog内部有严格的布局约束和交互逻辑，自定义layout Modifier会干扰其内部测量流程，导致丢失默认的点击关闭、焦点处理等行为。基础Dialog组件更轻量化，完全适配自定义场景。

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