Compose Bottom Sheet 与 Dialog：模态组件详解

模态组件是移动应用中常见的交互模式，用于展示额外内容或请求用户确认。Compose 提供了丰富的模态组件支持。

一、Modal Bottom Sheet

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ModalBottomSheetExample() {
    var showSheet by remember { mutableStateOf(false) }
    val sheetState = rememberModalBottomSheetState()
    
    if (showSheet) {
        ModalBottomSheet(
            onDismissRequest = { showSheet = false },
            sheetState = sheetState
        ) {
            // Sheet 内容
        }
    }
}

二、AlertDialog

@Composable
fun BasicAlertDialog() {
    var showDialog by remember { mutableStateOf(false) }
    
    if (showDialog) {
        AlertDialog(
            onDismissRequest = { showDialog = false },
            title = { Text("确认删除") },
            text = { Text("删除后无法恢复，确定要删除吗？") },
            confirmButton = {
                TextButton(onClick = { showDialog = false }) {
                    Text("删除")
                }
            },
            dismissButton = {
                TextButton(onClick = { showDialog = false }) {
                    Text("取消")
                }
            }
        )
    }
}

三、自定义 Dialog

@Composable
fun CustomDialog() {
    Dialog(onDismissRequest = { }) {
        Card(shape = RoundedCornerShape(16.dp)) {
            Column(modifier = Modifier.padding(24.dp)) {
                // 自定义内容
            }
        }
    }
}

四、最佳实践

• ✅ 使用 remember 管理显示状态
• ✅ Modal Bottom Sheet 用于临时操作
• ✅ AlertDialog 用于确认操作
• ✅ 自定义 Dialog 用于复杂内容
• ✅ 封装通用对话框组件

总结

• ModalBottomSheet：临时操作面板
• AlertDialog：确认对话框
• Dialog：自定义对话框
• DatePickerDialog：日期选择