企业门户网站建设机构学院网站建设项目概述

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