Jetpack Compose Dialog, Popup, DropdownMenu, DropdownMenuItem

This article will introduce Dialog, AlertDialog, Popup, DropdownMenu, DropdownMenuItem use

A: the Dialog

Dialog box, a look at the code.

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

OnDismissRequest A callback that is executed when the user tries to close the dialog box. For example, click the back button, click the area outside the dialog box
Properties implementation is DialogProperties specific look at DialogProperties code
```
@Immutable
class DialogProperties(
  val dismissOnBackPress: Boolean = true.val dismissOnClickOutside: Boolean = true.valsecurePolicy: SecureFlagPolicy = SecureFlagPolicy.Inherit ){... }Copy the code
```
- DismissOnBackPress whether you can dismiss the dialog box by pressing the back button; if true, clicking the back button calls onDismissRequest
- Seamlessly dismissOnClickOutside Whether you can dismiss the dialog by clicking on the area outside the dialog box; if true, clicking on the area outside the dialog box will call onDismissRequest back
- SecurePolicy used on the dialog window Settings WindowManager. LayoutParams. The FLAG. There are three values SecureFlagPolicy Inherit, SecureFlagPolicy. SecureOn, SecureFlagPolicy. SecureOff.
The content content

Example: normal display title, content, and a cancel, a confirm button dialog box.

@Preview
@Composable
fun dialogTest(a){
    val state = remember {
        mutableStateOf(true)
    }
    Dialog(
        onDismissRequest = {
            Log.e("ccm"."====onDismiss=====")
            state.value = false
        },
        properties = DialogProperties(dismissOnBackPress=true,dismissOnClickOutside = true,securePolicy = SecureFlagPolicy.SecureOff)
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight()
                .padding(horizontal = 15.dp)
                .background(
                    Color.White, shape = RoundedCornerShape(8.dp)
                )
        ){
            Spacer(modifier = Modifier.height(10.dp))
            Text(text = "Dialog box title",color = Color.Black,fontSize = 16.sp,modifier = Modifier.padding(start = 10.dp),fontWeight = FontWeight.Bold)
            Spacer(modifier = Modifier.height(6.dp))
            Text(text = "Dialog box contents, dialog box contents, dialog box contents, dialog box contents, dialog box contents",modifier = Modifier.padding(horizontal = 10.dp),lineHeight = 20.sp,fontSize = 14.sp)
            Spacer(modifier = Modifier.height(10.dp))
            Divider(modifier = Modifier.height(0.5.dp))
            Row() {
                Button(
                    onClick = {
                        state.value = false
                    },
                    modifier = Modifier.weight(1f.true),
                    shape = RoundedCornerShape(bottomStart = 8.dp),
                    colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),
                ) {
                    Text(text = "Cancel")
                }
                Button(
                    onClick = {
                        state.value = false
                    },
                    modifier = Modifier.weight(1f.true),
                    shape = RoundedCornerShape(bottomEnd = 8.dp),
                    colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),
                ) {
                    Text(text = "Sure")}}}}}Copy the code

2: AlertDialog

An AlertDialog Dialog box is a wrapper around a Dialog box. Let’s take a look at the code.

@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()
){
    
    Dialog(
        onDismissRequest = onDismissRequest,
        properties = properties
    ) {
        AlertDialogContent(
            buttons = buttons,
            modifier = modifier,
            title = title,
            text = text,
            shape = shape,
            backgroundColor = backgroundColor,
            contentColor = contentColor
        )
    }
}
Copy the code

OnDismissRequest A callback that is executed when the user tries to close the dialog box. For example, click the back button, click the area outside the dialog box
Buttons Displays the contents of the button area. You can define it yourself
Modifier (previous article on the use of modifier in detail)
Title Indicates the content displayed in the title area
Text Indicates the content to be displayed in the content area
Shape Indicates the shape of the dialog box
BackgroundColor specifies the backgroundColor of the dialog box
ContentColor The color of the content of the dialog box
Properties DialogProperties same as the above Dialog

For example:

@Preview
@Composable
fun alertDialogTest(a){
    AlertDialog(
        onDismissRequest = { },
        buttons = {
            Row() {
                Button(
                    onClick = {
                    },
                    modifier = Modifier.weight(1f.true),
                    shape = RoundedCornerShape(bottomStart = 8.dp),
                    colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),
                ) {
                    Text(text = "Cancel")
                }
                Button(
                    onClick = {
                    },
                    modifier = Modifier.weight(1f.true),
                    shape = RoundedCornerShape(bottomEnd = 8.dp),
                    colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),
                ) {
                    Text(text = "Sure")
                }
            }
        },
        title = {
            Text(text = "Dialog box title")
        },
        text = {
            Text(text = "Dialog contents dialog contents")
        },
        shape = RoundedCornerShape(8.dp),
        backgroundColor = Color.White,
        contentColor = Color.Black,
        properties = DialogProperties()
    )
}
Copy the code

Three: DropdownMenuItem

DropdownMenuItem is just like the Popupwindow content item we had before. Let’s take a look at the code

@Composable
fun DropdownMenuItem(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    contentPadding: PaddingValues = MenuDefaults.DropdownMenuItemContentPadding,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable RowScope.() -> Unit
)
Copy the code

OnClick Click the event callback
Modifier modifier
Enabled Whether it is available
ContentPadding The margin of the content
InteractionSource was talked about in the past when WE talked about buttons. Can handle state, such as when pressed what effect, normal when what effect. Just like we did before, let’s write the Selector in the layout file. For example, in the example below, the border line is green if it is selected and black if it is not. InteractionSource. CollectIsPressedAsState () to determine whether to press state interactionSource. CollectIsFocusedAsState () Determine whether acquiring interactionSource. The focus of state collectIsDraggedAsState () to determine whether the drag
Content Indicates the content

For example, when we used to View the system, we often had such a scene, click a button, pop up Popupwindow, and each item in Popupwindow is an icon and text. We use DropdownMenuItem to implement the icon and text, which is red when pressed and gets focus, black by default.

@Composable
fun dropdownMenuItemTest(state:MutableState<Boolean>,icon: ImageVector,text:String){
    val interactionSource = remember { MutableInteractionSource() }
    val pressState = interactionSource.collectIsPressedAsState()
    val focusState = interactionSource.collectIsFocusedAsState()
    DropdownMenuItem(
        onClick = {
            state.value = false
        },
        enabled = true,
        interactionSource = interactionSource
    ) {
        Icon(imageVector = icon, contentDescription = text,tint = if(pressState.value || focusState.value) Color.Red else Color.Black)
        Text(text = text,modifier = Modifier.padding(start = 10.dp),color = if(pressState.value || focusState.value) Color.Red else Color.Black)
    }
}
Copy the code

Four: DropdownMenu

This is equivalent to the old Popupwindow effect. Above we introduced DropdownMenuItem. Now look at the DropdownMenu. DropdownMenuItem is a child of DropdownMenu. Look at the code

@Suppress("ModifierParameter")
@Composable
fun DropdownMenu(
    expanded: Boolean,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    offset: DpOffset = DpOffset(0.dp, 0.dp),
    properties: PopupProperties = PopupProperties(focusable = true),
    content: @Composable ColumnScope.() -> Unit
){
   ...
        Popup(
            onDismissRequest = onDismissRequest,
            popupPositionProvider = popupPositionProvider,
            properties = properties
        ) {
            DropdownMenuContent(
                expandedStates = expandedStates,
                transformOriginState = transformOriginState,
                modifier = modifier,
                content = content
            )
        }
   ...
}
Copy the code

Expanded Whether expanded
OnDismissRequest Clicking on areas outside of the DropdownMenu calls back to this function. To hide the DropdownMenu logic
Modifier modifier
Offset is an offset. DpOffset(x,y) x is the offset in the horizontal direction, and y is the offset in the vertical direction
Properties is the PopupProperties property. Let’s look at the code
```
@Immutable
class PopupProperties(
  val focusable: Boolean = false.val dismissOnBackPress: Boolean = true.val dismissOnClickOutside: Boolean = true.val securePolicy: SecureFlagPolicy = SecureFlagPolicy.Inherit
) 
Copy the code
```
- Focusable specifies whether the focusable pop-up window is focusable. If true, the pop-up window will receive input method events and keys. For example, when the return key is pressed, only focusable is true to receive the return key pressed.
- DismissOnBackPress eject button whether you can press the back button. If true, pressing the back button calls onDismissRequest. Note that focusable must be set to true to receive key events such as the back button – this property does nothing if the pop-up window is not focused
- DismissOnClickOutside Whether you can dismiss a pop-up window by clicking outside of its boundary. If true, clicking outside the pop-up window calls onDismissRequest
- SecurePolicy used in a pop-up window Settings WindowManager. LayoutParams. The FLAG. Three kinds of values SecureFlagPolicy Inherit, SecureFlagPolicy. SecureOn, SecureFlagPolicy. SecureOff
Content Specific content

For example, when we used to View the system, we often had such a scene, click a button, DropdownMenu pops up. Use this in conjunction with the DropdownMenuItem above

@Preview
@Composable
fun dropdownMenuTest(a){
    val expandState = remember {
        mutableStateOf(false)
    }
    Column() {
        Button(
            onClick = {
                expandState.value = true
            }) {
            Text(text = "Open the DropdownMenu")
        }
        DropdownMenu(
            expanded = expandState.value,
            onDismissRequest = {
                Log.e("ccm"."Execute onDismissRequest")
                expandState.value = false
            },
            offset = DpOffset(10.dp,10.dp),
            properties = PopupProperties()
        ) {
            dropdownMenuItemTest(expandState,Icons.Filled.Favorite,"Collection")
            dropdownMenuItemTest(expandState,Icons.Filled.Edit,"Edit")
            dropdownMenuItemTest(expandState,Icons.Filled.Delete,"Delete")}}}@Composable
fun dropdownMenuItemTest(state:MutableState<Boolean>,icon: ImageVector,text:String){
    val interactionSource = remember { MutableInteractionSource() }
    val pressState = interactionSource.collectIsPressedAsState()
    val focusState = interactionSource.collectIsFocusedAsState()
    DropdownMenuItem(
        onClick = {
            state.value = false
        },
        enabled = true,
        interactionSource = interactionSource
    ) {
        Icon(imageVector = icon, contentDescription = text,tint = if(pressState.value || focusState.value) Color.Red else Color.Black)
        Text(text = text,modifier = Modifier.padding(start = 10.dp),color = if(pressState.value || focusState.value) Color.Red else Color.Black)
    }
}
Copy the code

Five: Popup

Popup is just like Popupwindow, and we can see that the DropdownMenu above is an implementation of Popup. Take a look at the Popup code

@Composable
fun Popup(
    alignment: Alignment = Alignment.TopStart,
    offset: IntOffset = IntOffset(0.0),
    onDismissRequest: (() -> Unit)? = null,
    properties: PopupProperties = PopupProperties(),
    content: @Composable() - >Unit) {... }Copy the code

Alignment Indicates the alignment. We saw that in Column before
Offset the offset. IntOffset(x,y) x is the offset in the horizontal direction and y is the offset in the vertical direction.
OnDismissRequest A callback that is executed when the user clicks outside of a pop-up window
Properties similar to the above
Content Indicates the content

For example. Change the DropdownMenu example above to Popup

@Preview
@Composable
fun popUpTest(a){
    val expandState = remember {
        mutableStateOf(false)
    }
    Column() {
        Button(
            onClick = {
                expandState.value = true
            }) {
            Text(text = "Open the DropdownMenu")
        }
        Popup(
            alignment = Alignment.TopStart,
            onDismissRequest = {
                Log.e("ccm"."Execute onDismissRequest")
                expandState.value = false
            },
            offset = IntOffset(10.140),
        ) {
            Column(
                modifier = Modifier.width(IntrinsicSize.Min).shadow(
                    elevation = 2.dp,shape = RoundedCornerShape(3.dp)
                ).background(Color.White,shape = RoundedCornerShape(3.dp))
            ) {
                dropdownMenuItemTest(expandState,Icons.Filled.Favorite,"Collection")
                dropdownMenuItemTest(expandState,Icons.Filled.Edit,"Edit")
                dropdownMenuItemTest(expandState,Icons.Filled.Delete,"Delete")}}}}@Composable
fun dropdownMenuItemTest(state:MutableState<Boolean>,icon: ImageVector,text:String){
    val interactionSource = remember { MutableInteractionSource() }
    val pressState = interactionSource.collectIsPressedAsState()
    val focusState = interactionSource.collectIsFocusedAsState()
    DropdownMenuItem(
        onClick = {
            state.value = false
        },
        enabled = true,
        interactionSource = interactionSource
    ) {
        Icon(imageVector = icon, contentDescription = text,tint = if(pressState.value || focusState.value) Color.Red else Color.Black)
        Text(text = text,modifier = Modifier.padding(start = 10.dp),color = if(pressState.value || focusState.value) Color.Red else Color.Black)
    }
}
Copy the code

Jetpack Compose Dialog, Popup, DropdownMenu, DropdownMenuItem

A: the Dialog

2: AlertDialog

Three: DropdownMenuItem

Four: DropdownMenu

Five: Popup

Related Posts

PriorityQueue for Java data structures

Android enterprise-level combat – Interface chapter -2

Android Material Design: BottomSheetBehavior