Compose笔记(六)--Dialog

       这一节主要了解一下Compose中用到的Dialog，Dialog 是用于创建模态对话框的重要组件，它会阻止用户与对话框背后的界面进行交互，直到对话框被关闭。如下是几种常见的Dialog：

1. 使用 AlertDialog
AlertDialog 是用于显示简单提示或确认对话框的组件。

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

    Column() {
        Button(onClick = {
            showDialog = true
        }){
           Text("显示 dialog")
        }
        if(showDialog) {
            AlertDialog(
                modifier = Modifier
                    .width(400.dp)
                    .height(200.dp),
                onDismissRequest = { showDialog = false},
                title = { Text("Title")},
                confirmButton = {
                    TextButton(onClick = {showDialog = false}) {
                        Text(text = "Confirm")
                    }
                },
                dismissButton = {
                    TextButton(onClick = {showDialog = false}) {
                        Text(text = "Cancel")
                    }
                },
                text = {
                    Text("这是Dialog的主体内容")
                }
            )
        }
    }
}

2. 使用 Dialog
Dialog 是一个更通用的对话框组件，允许自定义内容。

@Composable
fun CustomDialogExample(onDismissRequest: () -> Unit) {
    val openDialog = remember { mutableStateOf(true) }
    Column() {
        Button(onClick = {
            openDialog.value = true
        }) {
            Text("show dialog")
        }
        if (openDialog.value) {
            Dialog(onDismissRequest = {
                openDialog.value = false
                onDismissRequest()
            }) {
                Surface(
                    shape = RoundedCornerShape(16.dp),
                    color = MaterialTheme.colors.surface
                ) {
                    Column(
                        modifier = Modifier.padding(16.dp),
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Text("Custom Dialog", style = MaterialTheme.typography.h6)
                        Spacer(modifier = Modifier.height(16.dp))
                        Text("This is a custom dialog with a custom layout.")
                        Spacer(modifier = Modifier.height(24.dp))
                        Button(onClick = {
                            openDialog.value = false
                            onDismissRequest()
                        }) {
                            Text("Close")
                        }
                    }
                }
            }
        }
    }
}


使用:
    CustomDialogExample(
        onDismissRequest = {
            Log.d("Dialog","====>>> Test")
        }
    )

3. 使用 ModalBottomSheetLayout
ModalBottomSheetLayout 用于显示从底部弹出的对话框。

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun BottomSheetDialogExample() {
    val modalBottomSheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
    val coroutineScope = rememberCoroutineScope()

    ModalBottomSheetLayout(
        sheetState = modalBottomSheetState,
        sheetContent = {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text("Bottom Sheet Dialog", style = MaterialTheme.typography.h6)
                Spacer(modifier = Modifier.height(16.dp))
                Text("This is a bottom sheet dialog.")
                Spacer(modifier = Modifier.height(24.dp))
                Button(onClick = {
                    coroutineScope.launch { modalBottomSheetState.hide() }
                }) {
                    Text("Close")
                }
            }
        }
    ) {
        Button(onClick = {
            coroutineScope.launch { modalBottomSheetState.show() }
        }) {
            Text("Show Bottom Sheet")
        }
    }
}

4. 使用 Popup
Popup 用于显示一个简单的弹出窗口。

@Composable
fun PopupExample() {
    val showPopup = remember { mutableStateOf(false) }

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Button(onClick = { showPopup.value = true }) {
            Text("Show Popup")
        }

        if (showPopup.value) {
            Popup(
                onDismissRequest = { showPopup.value = false },
                alignment = Alignment.Center
            ) {
                Surface(
                    color = MaterialTheme.colors.surface,
                    elevation = 8.dp,
                    shape = RoundedCornerShape(8.dp)
                ) {
                    Column(
                        modifier = Modifier.padding(16.dp),
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Text("Popup Dialog", style = MaterialTheme.typography.h6)
                        Spacer(modifier = Modifier.height(16.dp))
                        Text("This is a popup dialog.")
                        Spacer(modifier = Modifier.height(24.dp))
                        Button(onClick = { showPopup.value = false }) {
                            Text("Close")
                        }
                    }
                }
            }
        }
    }
}

5. 使用 DropdownMenu
DropdownMenu 用于显示一个下拉菜单式的对话框。

@Composable
fun DropdownMenuExample() {
    val expanded = remember { mutableStateOf(false) }

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Button(onClick = { expanded.value = true }) {
            Text("Show Dropdown Menu")
        }

        DropdownMenu(
            expanded = expanded.value,
            onDismissRequest = { expanded.value = false }
        ) {
            DropdownMenuItem(onClick = { expanded.value = false }) {
                Text("Option 1")
            }
            DropdownMenuItem(onClick = { expanded.value = false }) {
                Text("Option 2")
            }
            DropdownMenuItem(onClick = { expanded.value = false }) {
                Text("Option 3")
            }
        }
    }
}

注意: 1.使用remember管理对话框显示状态,对话框的显示与隐藏通常依赖于一个布尔类型的状态变量。为了确保状态在重组时能正确保存和恢复，需要使用 remember 来管理这个状态。2.避免在循环或条件语句中创建可变状态,不要在循环或条件语句中创建新的可变状态，因为这可能会导致状态不一致。3.避免在对话框中进行复杂计算,对话框中的内容应该尽量简洁，避免在对话框的组合过程中进行复杂的计算或耗时操作。如果有复杂的数据处理需求，应该在对话框显示之前完成计算，并将结果传递给对话框。