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.避免在对话框中进行复杂计算,对话框中的内容应该尽量简洁，避免在对话框的组合过程中进行复杂的计算或耗时操作。如果有复杂的数据处理需求，应该在对话框显示之前完成计算，并将结果传递给对话框。