Jetpack Compose&M3：底部弹窗上Exposed下拉菜单被遮挡问题

核心问题 #

ModalBottomSheet的内容区域默认被裁剪，下拉菜单无法突破弹窗边界导致被遮挡。zIndex()无法解决该问题，因为弹窗内容属于独立的布局层级。

解决方法 #

方法1：允许内容超出弹窗边界并添加滚动

给弹窗内的Column添加wrapContentHeight(unbounded = true)，允许内容突破弹窗高度限制，同时添加滚动确保所有内容可访问：

修改后的底部弹窗代码：

ModalBottomSheet(
    onDismissRequest = { showBottomSheet = false },
    sheetState = sheetState,
    tonalElevation = 1.dp
) {
    Column(
        modifier = Modifier
            .padding(16.dp)
            .wrapContentHeight(unbounded = true) // 允许内容超出弹窗边界
            .verticalScroll(rememberScrollState()) // 添加滚动保证内容可访问
    ) {
        TopAppBar(
            title = {
                Text(
                    text = "New Case",
                    style = MaterialTheme.typography.titleLarge,
                )
            },
            actions = {
                TextButton(onClick = {
                    scope.launch { sheetState.hide() }.invokeOnCompletion {
                        if (!sheetState.isVisible) {
                            showBottomSheet = false
                        }
                    }
                }) {
                    Text(
                        text = "Add",
                        style = MaterialTheme.typography.titleMedium,
                    )
                }
            },
            modifier = Modifier.fillMaxWidth()
        )

        TitleTF()
        Spacer(modifier = Modifier.height(16.dp))
        DeadLineTF()
        Spacer(modifier = Modifier.height(16.dp))
        ProjectDropdown()
        Spacer(modifier = Modifier.height(16.dp))
        CaseDescriptionTF()
        Spacer(modifier = Modifier.height(16.dp))
    }
}

方法2：让下拉菜单向上展开

调整下拉菜单的展开方向，让菜单向上显示，避开弹窗底部的遮挡：

修改后的下拉菜单代码：

val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
var expanded by remember { mutableStateOf(false) }
var selectedOptionText by remember { mutableStateOf(options[0]) }

ExposedDropdownMenuBox(
    expanded = expanded,
    onExpandedChange = { expanded = !expanded },
) {
    OutlinedTextField(
        modifier = Modifier.menuAnchor(),
        readOnly = true,
        value = selectedOptionText,
        onValueChange = {},
        label = { Text("Label") },
        trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
        colors = ExposedDropdownMenuDefaults.textFieldColors(),
    )
    ExposedDropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false },
        modifier = Modifier.excludeFromSystemGesture()
    ) {
        // 反转选项顺序，让第一个选项紧贴输入框
        options.reversed().forEach { selectionOption ->
            DropdownMenuItem(
                text = { Text(selectionOption) },
                onClick = {
                    selectedOptionText = selectionOption
                    expanded = false
                },
                contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
            )
        }
    }
}

注意事项 #

• zIndex()对该场景无效，因为弹窗内容处于独立布局层级，无法通过层级调整突破边界。
• 使用方法1时必须添加滚动修饰符，否则过长内容会超出屏幕无法访问。

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