Jetpack Compose - DropdownMenu / Composable 放置在 (the) 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")
            }
        }
    }
}

我得到了什么：

（我在 Box 周围设置了一个边框以查看其边界）

按下排序按钮后，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 guidelines，下拉菜单应放在元素下方。

要在使用 DropdownMenu 的 Compose 中获得此布局，您需要将其放在带有调用按钮的 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")
        }
    }
}

Sort 是调用按钮的输出：