Jetpack Compose - DropdownMenu / Composable 放在 Box 外面

Question

我正在嘗試為我的應用程序創建一個自定義 TopBar，並且我希望在屏幕的右上角顯示一個DropdownMenu 。 我有一個Box ，其中包含Row （帶有一些文本和圖標）和一個最初不顯示的DropdownMenu 。 當我單擊一個圖標時，會顯示DropdownMenu ，但在Box之外，所以不在我想要的位置。 代碼：

@Composable
private fun TopBar {
    var expanded by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier
            .border(1.dp, Color.Black)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                text = "Ride history",
                maxLines = 1,
                fontSize = 25.sp
            )

            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.End
            ) {
                IconButton(
                    onClick = {}) {
                    Icon(imageVector = Icons.Filled.Search, contentDescription = null)
                }
                IconButton(
                    onClick = { expanded = !expanded }) {
                    Icon(imageVector = Icons.Filled.Sort, contentDescription = null)
                }
                IconButton(
                    onClick = { findNavController().navigate(RideFragmentDirections.actionRideFragmentToSettingsFragment())}) {
                    Icon(imageVector = Icons.Filled.Settings, contentDescription = null)
                }
            }
        }
        DropdownMenu(
            modifier = Modifier.align(Alignment.TopEnd),
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            DropdownMenuItem(onClick = {}) {
                Text(text = "BlaBla")
            }
            DropdownMenuItem(onClick = {}) {
                Text(text = "BlaBla")
            }
        }
    }
}

我得到的：

（我在盒子周圍放了一個邊框來查看它的邊界）

按下排序按鈕后，會出現DropdownMenu ，但它位於Box之外。 我希望它放在右上角，覆蓋所有內容。 我錯過了什么？

更新

@Composable
private fun TopBar() {
    var expanded by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier
            .border(1.dp, Color.Black)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                text = "Ride history",
                maxLines = 1,
                fontSize = 25.sp
            )

            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.End
            ) {
                IconButton(
                    onClick = {}
                ) {
                    Icon(imageVector = Icons.Filled.Search, contentDescription = null)
                }
                IconButton(
                    onClick = { expanded = !expanded }
                ) {
                    Icon(imageVector = Icons.Filled.Sort, contentDescription = null)
                }
                IconButton(
                    onClick = {}
                ) {
                    Icon(imageVector = Icons.Filled.Settings, contentDescription = null)
                }
            }
        }
        Box(
            modifier = Modifier.fillMaxHeight().align(Alignment.TopEnd),
            contentAlignment = Alignment.TopEnd
        ) {
            DropdownMenu(
                expanded = expanded,
                onDismissRequest = { expanded = false }
            ) {
                DropdownMenuItem(onClick = {}) {
                    Text(text = "BlaBla")
                }
                DropdownMenuItem(onClick = {}) {
                    Text(text = "BlaBla")
                }
            }
        }
    }
}

這產生：

Answer 1

根據Material 指南，下拉菜單應放置在元素下方。

要在 Compose 中使用DropdownMenu獲得此布局，您需要將其放入帶有調用按鈕的Box中，如下所示：

Box {
    IconButton(
        onClick = { expanded = !expanded }
    ) {
        Icon(imageVector = Icons.Filled.Sort, contentDescription = null)
    }
    DropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false }
    ) {
        DropdownMenuItem(onClick = {}) {
            Text(text = "BlaBla")
        }
        DropdownMenuItem(onClick = {}) {
            Text(text = "BlaBla")
        }
    }
}

Output 其中Sort是調用按鈕：