Compose 中的 Dialog在 Jetpack Compose 中，Dialog 是一个用来显示对话框的组件。对话

在 Jetpack Compose 中，Dialog 是一个用来显示对话框的组件。对话框通常用于中断用户操作，以显示重要信息或者要求用户进行某种输入。

Dialog 的基本用法

Dialog 组件需要一个布尔类型的状态来控制其显示与隐藏，通过传递 onDismissRequest 参数来处理对话框的关闭操作。

基本示例

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp()
        }
    }
}

@Composable
fun MyApp() {
    var showDialog by remember { mutableStateOf(false) }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Dialog Example") }
            )
        },
        content = { paddingValues ->
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(paddingValues),
                contentAlignment = Alignment.Center
            ) {
                Button(onClick = { showDialog = true }) {
                    Text("Show Dialog")
                }

                if (showDialog) {
                    AlertDialog(
                        onDismissRequest = { showDialog = false },
                        title = {
                            Text(text = "Dialog Title")
                        },
                        text = {
                            Text("This is a simple dialog example in Jetpack Compose.")
                        },
                        confirmButton = {
                            Button(
                                onClick = { showDialog = false }
                            ) {
                                Text("Confirm")
                            }
                        },
                        dismissButton = {
                            TextButton(
                                onClick = { showDialog = false }
                            ) {
                                Text("Dismiss")
                            }
                        }
                    )
                }
            }
        }
    )
}

详细讲解

状态管理：
```
var showDialog by remember { mutableStateOf(false) }
```
使用 remember 和 mutableStateOf 创建一个布尔状态来控制 Dialog 的显示和隐藏。

Scaffold：

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("Dialog Example") }
        )
    },
    content = { paddingValues ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues),
            contentAlignment = Alignment.Center
        ) {
            ...
        }
    }
)

使用 Scaffold 来创建一个包含顶栏（TopAppBar）的基础布局。

Button：
```
Button(onClick = { showDialog = true }) {
    Text("Show Dialog")
}
```
一个按钮，当被点击时，showDialog 状态设置为 true，从而显示对话框。

AlertDialog：

if (showDialog) {
    AlertDialog(
        onDismissRequest = { showDialog = false },
        title = {
            Text(text = "Dialog Title")
        },
        text = {
            Text("This is a simple dialog example in Jetpack Compose.")
        },
        confirmButton = {
            Button(
                onClick = { showDialog = false }
            ) {
                Text("Confirm")
            }
        },
        dismissButton = {
            TextButton(
                onClick = { showDialog = false }
            ) {
                Text("Dismiss")
            }
        }
    )
}

使用 AlertDialog 组件来创建对话框。onDismissRequest 参数用于处理对话框的关闭操作，title 和 text 参数用于设置对话框的标题和内容，confirmButton 和 dismissButton 参数用于设置确认和取消按钮。

自定义 Dialog

除了 AlertDialog，Compose 还允许你创建完全自定义的对话框。

自定义 Dialog 示例

@Composable
fun CustomDialogDemo() {
    var showDialog by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Button(onClick = { showDialog = true }) {
            Text("Show Custom Dialog")
        }

        if (showDialog) {
            Dialog(onDismissRequest = { showDialog = false }) {
                Surface(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp),
                    shape = MaterialTheme.shapes.medium,
                    color = MaterialTheme.colorScheme.background
                ) {
                    Column(
                        modifier = Modifier.padding(16.dp),
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Text("Custom Dialog", style = MaterialTheme.typography.h6)
                        Spacer(modifier = Modifier.height(8.dp))
                        Text("This is a custom dialog in Jetpack Compose.")
                        Spacer(modifier = Modifier.height(16.dp))
                        Row(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.End
                        ) {
                            TextButton(onClick = { showDialog = false }) {
                                Text("Cancel")
                            }
                            Spacer(modifier = Modifier.width(8.dp))
                            Button(onClick = { showDialog = false }) {
                                Text("OK")
                            }
                        }
                    }
                }
            }
        }
    }
}

详细讲解

Dialog 组件：
```
if (showDialog) {
    Dialog(onDismissRequest = { showDialog = false }) {
        ...
    }
}
```
使用 Dialog 组件来创建自定义对话框。onDismissRequest 参数用于处理对话框的关闭操作。

Surface：

Surface(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    shape = MaterialTheme.shapes.medium,
    color = MaterialTheme.colorScheme.background
) {
    ...
}

使用 Surface 组件来创建对话框的背景和形状。

Column 布局：

Column(
    modifier = Modifier.padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    ...
}

使用 Column 布局来组织对话框内的内容。

通过上述示例，你可以看到在 Jetpack Compose 中创建和使用对话框非常直观和灵活，无论是使用预定义的 AlertDialog 还是完全自定义的对话框，都可以轻松实现。