“This is the 22nd day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

For example, Compose uses a Dialog as a prompt, just like the View system. Now that we have this API, we’ll have to roll it up and familiarize ourselves with the process and methods.

Dialog

Its constructors are as follows:

@Composable
fun Dialog(
    onDismissRequest: () -> Unit,
    properties: DialogProperties = DialogProperties(),
    content: @Composable () -> Unit
)
Copy the code

As you can see, we need to declare three parameters:

· onDismissRequest: () -> Unit: something that is executed when you click on the outside of the dialog box or press the back button.

Properties: DialogProperties? = null: dialog box to further configure a specific property.

· contentColor: Color = contentColorFor(backgroundColor) : the backgroundColor provided to its content.

Here’s an example:

var showDialog by remember { mutableStateOf(false) } Button(onClick = { showDialog = ! showDialog }) { Text("show dialog") } if (showDialog) { Dialog(onDismissRequest = { showDialog = ! showDialog }) { Column( modifier = Modifier .size(200.dp, 50. Dp).background(color.white)) {Text(Text = "this is a Text that describes the contents of Dialog ")}}}Copy the code

The corresponding effect is:

The code logic is simple, click button to display dialog, here use the keyword remember to refresh the Boolean value. With little else to say, you might be wondering why you declare a white Column inside your Dialog. The default Dialog is full-screen, and there is no Modifier custom parameter to modify the style. The usage aspect of Dialog is relatively simple, and the internal complexity of Dialog can wait for updates to Compose’s page refresh mechanism later.

AlertDialog

Dialog has so few parameters and so little customization. Will Google leave this design alone? The obvious answer is that an AlertDialog exists as an alternative to Dialog. According to its introduction:

An AlertDialog is a dialog box that interrupts the current user's behavior with an emergency message, details, or action.Copy the code

Basically, a dialog box that floats to the top of the interface. Let’s take a look at its two constructors:

@Composable
fun AlertDialog(
    onDismissRequest: () -> Unit,
    buttons: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    title: (@Composable () -> Unit)? = null,
    text: @Composable (() -> Unit)? = null,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    properties: DialogProperties = DialogProperties()
)
@Composable
fun AlertDialog(
    onDismissRequest: () -> Unit,
    confirmButton: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    dismissButton: @Composable (() -> Unit)? = null,
    title: @Composable (() -> Unit)? = null,
    text: @Composable (() -> Unit)? = null,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    properties: DialogProperties = DialogProperties()
)
Copy the code

The meanings of each parameter are as follows:

· Modifier: Modifier = modifier, that’s not to say.

· onDismissRequest: () -> Unit: something that is executed when you click on the outside of the dialog box or press the back button. Note: Clicking the close button of the dialog box does not execute.

· confirmButton: () -> Unit: the confirmButton operated by the user. There is no callback by default, you need to set the callback event by yourself.

· dismissButton: () -> Unit = null: This button is used to close the dialog box; it does not dismissButton by default; you need to dismissButton your own callback event.

· title: () -> Unit = null: title, no default content.

· text: () -> Unit = null: content, no default content.

Shape: shape = MaterialTheme. Shapes. Medium: the shape of the dialog box (Material).

BackgroundColor: Color = MaterialTheme. The colors. The surface: the dialog background Color.

· contentColor: Color = contentColorFor(backgroundColor) : the backgroundColor provided to its content.

Properties: DialogProperties? = null: dialog box to further configure a specific property.

The difference between the two AlertDialog constructors is whether the Button is customizable. One is the default button and the other is a custom button (you can use different layouts such as Column to show different buttons).

Observe its source architecture you will find that the first constructor AlertDialog inherited from the second function, and the second constructor and inherited from androidx.com pose. The UI. The window. The Dialog. It’s easy to see why an AlertDialog and Dialog’s constructor have the same three arguments.

The conventional way of using it is also simpler:

var showDialog by remember { mutableStateOf(false) } Column() { Button(onClick = { showDialog = ! showDialog }) { Text("click show AlerDialog") } if (showDialog) { AlertDialog( onDismissRequest = { showDialog = false }, title = { Text(text = "Title") }, text = { Text( "This area typically contains the supportive text " + "which presents the details regarding the Dialog's purpose." ) }, confirmButton = { TextButton( onClick = { showDialog = false } ) { Text("Confirm") } }, dismissButton = { TextButton( onClick = { showDialog = false } ) { Text("Dismiss") } } ) } }Copy the code

Its corresponding effect is:

Of course, this is just a simple example, and more customization can be done later. If you want to maximize customization, you can inherit AlertDialog and modify it later, just as AlertDialog inherits Dialog.