Jetpack Compose中Drop Up下拉菜单内容不显示问题求助

你的Drop Up菜单无法显示的核心问题是菜单与触发按钮没有布局关联，加上硬编码的offset导致菜单被推到屏幕可视区域之外。以下是具体修复步骤和代码：

关键问题分析 #

1. 原代码中将下拉菜单放在Column的最末尾，与附件按钮没有布局绑定，offset的计算基于整个Column底部，导致菜单被移出屏幕。
2. 硬编码的buttonHeight和dropdownHeight无法适配不同设备尺寸，位置计算误差大。

修复步骤 #

1. 重构下拉菜单组件 #

移除硬编码的offset，改用positionProvider让菜单相对于触发按钮定位：

@Composable
fun AttachmentsDropDownMenu(
    modifier: Modifier = Modifier,
    expanded: Boolean,
    onDismissRequest: () -> Unit,
    onMenuItemClick: () -> Unit
) {
    DropdownMenu(
        expanded = expanded,
        onDismissRequest = onDismissRequest,
        // 自定义位置提供器，将菜单放在按钮正上方
        positionProvider = { parentBounds ->
            Offset(
                x = parentBounds.left,
                y = parentBounds.top - DropdownMenuDefaults.DropdownMenuHeight
            )
        },
        modifier = modifier
    ) {
        DropdownMenuItem(
            onClick = {
                onMenuItemClick()
                onDismissRequest()
            },
            text = { Text("Photo") }
        )
        DropdownMenuItem(
            onClick = {
                onMenuItemClick()
                onDismissRequest()
            },
            text = { Text("Video") }
        )
        DropdownMenuItem(
            onClick = {
                onMenuItemClick()
                onDismissRequest()
            },
            text = { Text("Document") }
        )
    }
}

2. 将菜单与附件按钮绑定 #

用Box包裹附件图标和下拉菜单，确保菜单相对于按钮定位：

// 替换MessagesScreen中原附件Icon的代码
Box {
    Icon(
        imageVector = ImageVector.vectorResource(id = R.drawable.attachment),
        contentDescription = "attachment",
        modifier = Modifier
            .padding(end = 8.dp)
            .clickable {
                onActions(MessageScreenAction.onShowAttachmentDropDownMenu)
            }
            .size(30.dp)
    )
    // 下拉菜单直接放在按钮的Box内部
    AttachmentsDropDownMenu(
        expanded = state.showAttachmentDropDown,
        onDismissRequest = {
            onActions(MessageScreenAction.onHideAttachmentDropDownMenu)
        },
        onMenuItemClick = {
            // 这里可添加菜单项的具体逻辑，比如：
            // onActions(MessageScreenAction.SelectAttachment(AttachmentType.PHOTO))
        }
    )
}

3. 移除无效的菜单调用 #

删除Column末尾这段与按钮无关联的菜单代码：

// 删掉这段代码
/*
if (state.showAttachmentDropDown) {
    AttachmentsDropDownMenu(
        state = state,
        action = onActions,
        modifier = Modifier
            .padding(8.dp)
    )
}
*/

额外检查点 #

确保你的MessageScreenState中showAttachmentDropDown状态正确更新：

• 点击附件按钮时，状态切换为true
• 点击菜单外或菜单项时，状态切换为false

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