Jetpack Compose开发：DropdownMenu显示在Box外部如何固定到右上角？

问题原因 #

Jetpack Compose 中 DropdownMenu 的弹出位置默认以其直接父组件的坐标为锚点计算：初始代码中你直接将 DropdownMenu 放在最外层 Box 下，即使添加了align(Alignment.TopEnd)属性，DropdownMenu 默认的弹出偏移逻辑还是会以父组件左上角为基准计算位置，最终导致弹窗超出 Box 范围。

解决方案 #

你后续修改的方案已经可以实现需求：新增的子 Box 填充满 TopBar 高度且对齐到右上角，相当于给 DropdownMenu 指定了正确的锚点容器，此时 DropdownMenu 会以该子 Box 为基准弹出，刚好对齐到 TopBar 的右上角。

如果希望弹窗对齐触发它的排序按钮，交互逻辑更合理，可以直接将 DropdownMenu 绑定到排序图标的 IconButton 上，参考代码如下：

// 替换原排序图标相关代码即可
Box {
    IconButton(
        onClick = { expanded = !expanded }
    ) {
        Icon(imageVector = Icons.Filled.Sort, contentDescription = "排序")
    }
    DropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false }
    ) {
        DropdownMenuItem(onClick = {}) {
            Text(text = "BlaBla")
        }
        DropdownMenuItem(onClick = {}) {
            Text(text = "BlaBla")
        }
    }
}

该方案不需要额外调整全局对齐规则，DropdownMenu 会自动以排序按钮的位置为锚点弹出，适配性更强。

如果需要微调弹窗的位置，可以使用 DropdownMenu 的 offset 参数自定义偏移量：

DropdownMenu(
    expanded = expanded,
    onDismissRequest = { expanded = false },
    // 自定义X、Y轴的偏移量，单位dp
    offset = DpOffset(x = 0.dp, y = 4.dp)
) {
    // 菜单项内容
}

内容的提问来源于stack exchange，提问作者daniyelp