如何在Jetpack Compose中控制下拉菜单zIndex并置于OutlinedTextField后方

针对你遇到的下拉菜单无法正确显示在OutlinedTextField后方的问题，核心问题在于Popup默认层级高于常规Composable，以及错误的偏移设置导致位置不对。以下是修改方案：

关键修改点 #

1. 修正偏移设置：移除向上的错误偏移，改为微调负偏移让下拉菜单顶部与TextField底部重叠，实现视觉衔接。
2. 处理层级问题：通过给TextField添加阴影和不透明背景，确保它视觉上覆盖在下拉菜单上方（单纯设置zIndex对Popup无效）。
3. 统一形状与布局：对齐TextField和下拉菜单的圆角，移除多余占位项，调整内容padding。

修改后的完整代码 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun WalletDropDown(
    viewModel: BookViewModel,
    transactionType: TransactionType
) {
    val state by viewModel.state.collectAsState()
    ExposedDropdownMenuBox(
        expanded = state.isWalletExpanded && state.transactionType == transactionType.value,
        onExpandedChange = {
            viewModel.updateWalletExpanded(!state.isWalletExpanded)
        },
        modifier = Modifier.fillMaxWidth()
    ) {
        OutlinedTextField(
            value = state.wallet,
            onValueChange = { viewModel.updateNoteState(it) },
            shape = RoundedCornerShape(30.dp),
            colors = ExposedDropdownMenuDefaults.outlinedTextFieldColors(
                unfocusedBorderColor = Color.Black,
                focusedBorderColor = Color.Black
            ),
            textStyle = MaterialTheme.typography.bodyMedium.copy(
                platformStyle = PlatformTextStyle(includeFontPadding = false)
            ),
            trailingIcon = {
                Icon(
                    painter = painterResource(id = if (state.isWalletExpanded) R.drawable.ic_arrow_drop_up else R.drawable.ic_arrow_drop_down),
                    contentDescription = "Dropdown",
                    modifier = Modifier.size(24.dp)
                )
            },
            readOnly = true,
            modifier = Modifier
                .fillMaxWidth()
                .height(50.dp)
                .menuAnchor()
                // 添加阴影+不透明背景，让TextField视觉上位于下拉菜单上方
                .shadow(elevation = 2.dp, shape = RoundedCornerShape(30.dp))
                .background(Color.White)
        )

        MaterialTheme(
            shapes = MaterialTheme.shapes.copy(extraSmall = RoundedCornerShape(24.dp))
        ) {
            DropdownMenu(
                expanded = state.isWalletExpanded && state.transactionType == transactionType.value,
                onDismissRequest = { viewModel.updateWalletExpanded(false) },
                properties = PopupProperties(
                    focusable = true,
                    dismissOnClickOutside = true,
                    dismissOnBackPress = true
                ),
                // 微调偏移，让下拉菜单顶部与TextField底部重叠，实现衔接
                offset = DpOffset(x = 0.dp, y = (-8).dp),
                modifier = Modifier
                    .exposedDropdownSize(true)
                    .background(Color.White)
                    .border(
                        width = 1.dp,
                        color = Color.Black,
                        shape = RoundedCornerShape(30.dp)
                    )
            ) {
                // 用padding替代空MenuItem，调整内容位置
                Column(modifier = Modifier.padding(top = 8.dp)) {
                    WalletDropDownItem(
                        viewModel = viewModel,
                        icon = R.drawable.bca,
                        walletName = "BCA",
                        money = "Rp 1,000,000.00"
                    )
                    WalletDropDownItem(
                        viewModel = viewModel,
                        icon = R.drawable.dana,
                        walletName = "Dana",
                        money = "Rp 3,000,000.00"
                    )
                    WalletDropDownItem(
                        viewModel = viewModel,
                        icon = R.drawable.gopay,
                        walletName = "Gopay",
                        money = "Rp 500,000.00"
                    )
                }
            }
        }
    }
}

@Composable
fun WalletDropDownItem(
    viewModel: BookViewModel,
    icon: Int,
    walletName: String,
    money: String
) {
    DropdownMenuItem(
        leadingIcon = {
            Image(
                painter = painterResource(id = icon),
                contentDescription = "wallet",
                modifier = Modifier.size(24.dp)
            )
        },
        text = {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.fillMaxWidth()
            ) {
                Text(
                    text = walletName,
                    style = MaterialTheme.typography.bodyMedium
                )
                Text(
                    text = money,
                    style = MaterialTheme.typography.bodyMedium
                )
            }
        },
        onClick = {
            viewModel.updateWalletState(walletName)
            viewModel.updateWalletExpanded(false)
        },
        modifier = Modifier.fillMaxWidth()
    )
}

额外说明 #

• Material3的DropdownMenu基于Popup实现，默认层级高于所有常规Composable，因此单纯设置zIndex无法改变层级关系，必须通过不透明背景+阴影让TextField视觉上更靠前。
• 偏移数值（y=-8.dp）可以根据你的实际布局微调，直到达到理想的衔接效果。
• 如果需要更精确的位置控制，可以自定义PopupPositionProvider，但上述方案足以解决大部分场景的需求。

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