Jetpack Compose ExposedDropdownMenu has Incorrect Hierarchy and Behaviour When Called From a DropdownMenu - Stack Overflow

admin管理员组

文章数量:1122826

I have a dropdown menu with settings for my app. First there is an ExposedDropdownMenuto choose a font. The ExposedDropdownMenu is called from inside a DropdownMenu, but is rendered behind the parent DropdownMenu and divorced from the TextField it is anchored to. In the Layout Inspector, the ExposedDropdownMenu is not nested in its ExposedDropdownMenuBox and the DropdownMenu,cbut is on the same level of the hierarchy as the DropdownMenu. What am I doing wrong? Can an ExposedDropDownMenu not be called from a DropDownMenu? Screenshot of the Layout Inspector showing the problem in both the UI and the hierarchy.`

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("nstlqify") },
            colors = TopAppBarDefaults.topAppBarColors(
                containerColor = MaterialTheme.colorScheme.primary,
                titleContentColor = MaterialTheme.colorScheme.onPrimary
            ),
            scrollBehavior = scrollBehavior,
            actions = {
                IconButton(onClick = {
                    showMenu = !showMenu
                }) {
                    Icon(
                        imageVector = Icons.Default.
Settings
,
                        contentDescription = "Settings",
                        tint = MaterialTheme.colorScheme.onPrimary
                    )
                }
                DropdownMenu(
                    expanded = showMenu,
                    onDismissRequest = { showMenu = false }
                ) {
                    ExposedDropdownMenuBox(
                        expanded = showFontSelection,
                        onExpandedChange = {
                            showFontSelection = !showFontSelection
                        },
                        modifier = Modifier.
padding
(horizontal = 16.
dp
)
                    ) {
                        TextField(
                            readOnly = true,
                            value = selectedFontName,
                            onValueChange = {},
                            label = { Text("Choose Font") },
                            //trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = showFontSelection) },
                            modifier = Modifier.
menuAnchor
()

                        )

                        ExposedDropdownMenu(
                            expanded = showFontSelection,
                            onDismissRequest = {
                                showFontSelection = false
                            },
                            modifier = Modifier.
zIndex
(5f)
                        ) {
                            DropdownMenuItem(
                                text = { Text("JNN Regular") },
                                onClick = {
                                    //do stuff
                                    showFontSelection = false
                                }
                            )
                            DropdownMenuItem(
                                text = { Text("JNN Kasheeda") },
                                onClick = {
                                    //do sruff
                                    showFontSelection = false
                                }
                            )

                        }
                    }
                    Box {
                        Row {
                            Text(text = "Font SIze")
                            IconButton(onClick = {
                                fontSizeUpdated += 1
                            }) {
                                Icon(
                                    imageVector = Icons.Default.
KeyboardArrowUp
,
                                    contentDescription = "Increase",
                                    tint = MaterialTheme.colorScheme.onPrimary
                                )
                            }
                            Text(text = fontSizeUpdated.toString())
                            IconButton(onClick = {
                                fontSizeUpdated -= 1
                            }) {
                                Icon(
                                    imageVector = Icons.Default.
KeyboardArrowDown
,
                                    contentDescription = "Decrease",
                                    tint = MaterialTheme.colorScheme.onPrimary
                                )
                            }
                        }
                    }
                }
            }
        )
    },
    modifier = Modifier.
fillMaxSize
()
)

Increasing zIndex seems to do nothing to bring the ExposedDropdownMenu to the front.

I have a dropdown menu with settings for my app. First there is an ExposedDropdownMenuto choose a font. The ExposedDropdownMenu is called from inside a DropdownMenu, but is rendered behind the parent DropdownMenu and divorced from the TextField it is anchored to. In the Layout Inspector, the ExposedDropdownMenu is not nested in its ExposedDropdownMenuBox and the DropdownMenu,cbut is on the same level of the hierarchy as the DropdownMenu. What am I doing wrong? Can an ExposedDropDownMenu not be called from a DropDownMenu? Screenshot of the Layout Inspector showing the problem in both the UI and the hierarchy.`

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("nstlqify") },
            colors = TopAppBarDefaults.topAppBarColors(
                containerColor = MaterialTheme.colorScheme.primary,
                titleContentColor = MaterialTheme.colorScheme.onPrimary
            ),
            scrollBehavior = scrollBehavior,
            actions = {
                IconButton(onClick = {
                    showMenu = !showMenu
                }) {
                    Icon(
                        imageVector = Icons.Default.
Settings
,
                        contentDescription = "Settings",
                        tint = MaterialTheme.colorScheme.onPrimary
                    )
                }
                DropdownMenu(
                    expanded = showMenu,
                    onDismissRequest = { showMenu = false }
                ) {
                    ExposedDropdownMenuBox(
                        expanded = showFontSelection,
                        onExpandedChange = {
                            showFontSelection = !showFontSelection
                        },
                        modifier = Modifier.
padding
(horizontal = 16.
dp
)
                    ) {
                        TextField(
                            readOnly = true,
                            value = selectedFontName,
                            onValueChange = {},
                            label = { Text("Choose Font") },
                            //trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = showFontSelection) },
                            modifier = Modifier.
menuAnchor
()

                        )

                        ExposedDropdownMenu(
                            expanded = showFontSelection,
                            onDismissRequest = {
                                showFontSelection = false
                            },
                            modifier = Modifier.
zIndex
(5f)
                        ) {
                            DropdownMenuItem(
                                text = { Text("JNN Regular") },
                                onClick = {
                                    //do stuff
                                    showFontSelection = false
                                }
                            )
                            DropdownMenuItem(
                                text = { Text("JNN Kasheeda") },
                                onClick = {
                                    //do sruff
                                    showFontSelection = false
                                }
                            )

                        }
                    }
                    Box {
                        Row {
                            Text(text = "Font SIze")
                            IconButton(onClick = {
                                fontSizeUpdated += 1
                            }) {
                                Icon(
                                    imageVector = Icons.Default.
KeyboardArrowUp
,
                                    contentDescription = "Increase",
                                    tint = MaterialTheme.colorScheme.onPrimary
                                )
                            }
                            Text(text = fontSizeUpdated.toString())
                            IconButton(onClick = {
                                fontSizeUpdated -= 1
                            }) {
                                Icon(
                                    imageVector = Icons.Default.
KeyboardArrowDown
,
                                    contentDescription = "Decrease",
                                    tint = MaterialTheme.colorScheme.onPrimary
                                )
                            }
                        }
                    }
                }
            }
        )
    },
    modifier = Modifier.
fillMaxSize
()
)

Increasing zIndex seems to do nothing to bring the ExposedDropdownMenu to the front.

• android-jetpack-compose
• exposeddropdownmenu

Share Improve this question Follow asked Nov 22, 2024 at 0:11 M. Daniyal MalikM. Daniyal Malik 111 bronze badge 1

• Welcome to stackoverflow! If you found an answer useful, you can mark it as accepted answer by clicking the checkmark button at the left side of the answer. Thank you! – BenjyTec Commented Nov 22, 2024 at 12:47

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The ExposedDropdownMenuBox needs to be used when you want to display a DropdownMenu below a TextField.

ExposedDropdownMenuBox(
    //...
) {
    TextField(
        //...
    )
    ExposedDropdownMenu(
        //...
    ) {
        //...
    }
}

If you just want an action menu, a simple DropdownMenu is enough:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ActionDemo() {

    var showMenu by remember { mutableStateOf(false) }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Action Bar") },
                actions = {
                    IconButton(
                        onClick = {}
                    ) {
                        Icon(Icons.Default.AccountBox, "")
                    }
                    IconButton(onClick = { showMenu = !showMenu }) {
                        Icon(Icons.Default.MoreVert, "")
                    }
                    DropdownMenu(
                        expanded = showMenu,
                        onDismissRequest = { showMenu = false }
                    ) {
                        DropdownMenuItem(
                            onClick = { /*TODO*/ },
                            text = {
                                Text("Licenses")
                            },
                            leadingIcon = {
                                Icon(Icons.Filled.LocalPolice, "")
                            }
                        )
                        DropdownMenuItem(
                            onClick = { /*TODO*/ },
                            text = {
                                Text("Settings")
                            },
                            leadingIcon = {
                                Icon(Icons.Filled.Settings, "")
                            }
                        )
                    }
                }
            )
        }
    ) {
        Text(modifier = Modifier.padding(it), text = "Hello World")
    }
}

Output:

本文标签：