Compose | UI组件(八) | Dialog - 对话框

---

前言

在我们传统的UI界面中，经常用到弹框，Compose也有弹框，但是Compose的弹框显示和隐藏和传统的弹框显示（show）和隐藏 (dismiss)不一样，Compose中显示与否要看是否重组被执行，所以它显示与否要依赖状态控制

---

Dialog 普通弹框

Dialog是最底层的弹框，可以在该组件之上封装

@Composable
fun Dialog(onDismissRequest: () -> Unit,   //关闭回调函数properties: DialogProperties = DialogProperties(), //对话框的属性，用于自定义对话框content: @Composable () -> Unit    //对话框内容
)

Dialog 普通弹框的使用

@Composable
fun DialogMethod(){val openDialog = remember { mutableStateOf(false) }BaseDialog(dialogState = openDialog)Button(modifier = Modifier.wrapContentSize(),onClick  = { openDialog.value = !openDialog.value}) {Text(text = "显示普通dialog")}
}@Composable
fun BaseDialog(dialogState:MutableState<Boolean>){if(dialogState.value){Dialog(onDismissRequest = { dialogState.value = false }) {Box(modifier = Modifier.size(200.dp, 50.dp).background(Color.Red))}}
}

AlertDialog 警告弹框

AlertDialog组件是Dialog组件更高级的封装组件，它定位好了标题，内容文本，按钮位置

@Composable
fun AlertDialog(onDismissRequest: () -> Unit,                           //关闭回调函数confirmButton: @Composable () -> Unit,                  //确认按钮modifier: Modifier = Modifier,                          //修饰符dismissButton: @Composable (() -> Unit)? = null,        //取消按钮icon: @Composable (() -> Unit)? = null,                 //图标title: @Composable (() -> Unit)? = null,                //标题text: @Composable (() -> Unit)? = null,                 //内容shape: Shape = AlertDialogDefaults.shape,               //样式containerColor: Color = AlertDialogDefaults.containerColor,       //内容颜色iconContentColor: Color = AlertDialogDefaults.iconContentColor,   //图标颜色titleContentColor: Color = AlertDialogDefaults.titleContentColor, //标题颜色textContentColor: Color = AlertDialogDefaults.textContentColor,   //字体颜色tonalElevation: Dp = AlertDialogDefaults.TonalElevation,          //设置阴影properties: DialogProperties = DialogProperties()                 //对话框的属性，用于自定义对话框
) 

AlertDialog 警告弹框的使用

@Composable
fun DialogMethod(){val openAlertDialog = remember { mutableStateOf(false) }AlertDialogSample(dialogState = openAlertDialog)Button(modifier = Modifier.wrapContentSize(),onClick  = { openAlertDialog.value = !openAlertDialog.value}) {Text(text = "显示Alertdialog")}
}@Composable
fun AlertDialogSample(dialogState:MutableState<Boolean>){if(dialogState.value){AlertDialog(onDismissRequest = { dialogState.value = false },title = {Text(text = "提示标题")},text = {Text(text = "提示内容")},confirmButton = {TextButton(onClick = { dialogState.value = false }) {Text(text = "确定")}},dismissButton = {TextButton(onClick = { dialogState.value = false }) {Text(text = "取消")}})}
}

---

总结

1. Dialog是最底层的弹框，可以在该组件之上封装

2. AlertDialog组件是Dialog组件更高级的封装组件，它定位好了标题，内容文本，按钮位置