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是调用按钮：