如何在Jetpack Compose中实现自定义Alert Dialog弹窗

基础自定义（基于AlertDialog，保留Material Design规范） #

如果不需要完全重构Dialog的整体结构，只需要自定义中间内容区域（比如插入输入框、单选框、多选框等组件），直接使用官方提供的AlertDialog组件即可，它的title、text、按钮等参数都支持传入任意Composable组件，不局限于纯文本。

以下是带用户输入框的Dialog示例代码：

// 定义Dialog显隐状态与输入框状态
val openInputDialog = remember { mutableStateOf(true) }
val inputContent = remember { mutableStateOf("") }

if (openInputDialog.value) {
    AlertDialog(
        onDismissRequest = { openInputDialog.value = false },
        title = { Text("请输入内容") },
        // text参数传入输入框组件
        text = {
            TextField(
                value = inputContent.value,
                onValueChange = { inputContent.value = it },
                modifier = Modifier.fillMaxWidth(),
                placeholder = { Text("输入提示") }
            )
        },
        confirmButton = {
            Button(onClick = {
                // 处理确认逻辑，读取inputContent.value即可拿到用户输入
                openInputDialog.value = false
            }) {
                Text("确认")
            }
        },
        dismissButton = {
            Button(onClick = { openInputDialog.value = false }) {
                Text("取消")
            }
        }
    )
}

完全自定义（基于底层Dialog组件） #

如果需要100%自定义Dialog的样式、结构，不需要保留Material Design默认的Dialog框架，可以使用更底层的Dialog组件，内部可以自由组合任意Compose布局，和普通页面的编写逻辑完全一致。

以下是带单选按钮的自定义Dialog示例代码：

// 定义Dialog显隐状态与单选选中状态
val openRadioDialog = remember { mutableStateOf(true) }
val selectedOption = remember { mutableStateOf("选项1") }
val optionList = listOf("选项1", "选项2", "选项3")

if (openRadioDialog.value) {
    Dialog(
        onDismissRequest = { openRadioDialog.value = false },
        // 配置Dialog属性
        properties = DialogProperties(
            dismissOnBackPress = true,
            dismissOnClickOutside = true
        )
    ) {
        // 自定义Dialog容器
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 20.dp),
            shape = RoundedCornerShape(16.dp),
            elevation = CardDefaults.cardElevation(defaultElevation = 8.dp)
        ) {
            Column(
                modifier = Modifier.padding(24.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                Text("请选择选项", style = MaterialTheme.typography.titleMedium)
                // 单选列表
                optionList.forEach { option ->
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .clickable { selectedOption.value = option }
                            .padding(vertical = 8.dp),
                        horizontalArrangement = Arrangement.spacedBy(12.dp),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        RadioButton(
                            selected = selectedOption.value == option,
                            onClick = { selectedOption.value = option }
                        )
                        Text(text = option)
                    }
                }
                // 底部操作按钮
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.End
                ) {
                    TextButton(onClick = { openRadioDialog.value = false }) {
                        Text("取消")
                    }
                    Spacer(modifier = Modifier.width(16.dp))
                    TextButton(onClick = {
                        // 处理选中结果，读取selectedOption.value即可
                        openRadioDialog.value = false
                    }) {
                        Text("确认")
                    }
                }
            }
        }
    }
}

注意事项 #

• Dialog的显隐完全通过状态变量控制，不需要像XML时代那样调用show()、dismiss()方法，符合Compose声明式编程的范式
• 除了输入框、单选按钮外，你还可以在Dialog内部插入任何Compose支持的组件，包括图片、列表、进度条等，没有任何限制
• 可以通过DialogProperties配置Dialog的行为，比如是否支持点击外部关闭、是否可以返回键关闭、是否全屏等

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