如何控制 jetpack compose 中下拉菜单的 z 索引？

问：

我想制作一个下拉菜单以位于 OutlinedTextField 后面

我希望做这个正确的图像

这是它当前当前应用程序的样子

我尝试放置 zIndex，并更新到 androidx.compose.material3：material3：1.2.0-alpha10。我还通过将 ExposedDropDownMenu 更改为 DropDownMenu 并在 DropDownMenu 上使用 .exposedDropdownSize（） 来使用宽度的解决方法

@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,
            ),
            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)
                .padding(bottom = 5.dp)
                .menuAnchor()
                .zIndex(2f)
        )
        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
                ),
                offset = DpOffset(x = 0.dp, y = (-50).dp),
                modifier = Modifier
                    .exposedDropdownSize(true)
                    .background(Color.White)
                    .border(
                        width = 1.dp,
                        color = Color.Black,
                        shape = RoundedCornerShape(24.dp)
                    )
                    .zIndex(1f)

            ) {
                DropdownMenuItem(text = {}, onClick = {}, modifier = Modifier.height(50.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()
            .zIndex(1f)
    )
}