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组件更高级的封装组件，它定位好了标题，内容文本，按钮位置