如何让Jetpack Compose中ModalBottomSheet的scrimColor铺满全屏？

问题原因 #

• 你将ModalBottomSheet嵌套在Scaffold的content区域内，且外层Box应用了contentPadding，导致遮罩（scrim）只能在扣除TopAppBar后的区域显示，无法覆盖顶部导航栏。
• 给ModalBottomSheet添加的navigationBarsPadding、statusBarsPadding等修饰符进一步限制了遮罩的范围。

解决方案 #

• 将ModalBottomSheet移到Scaffold组件外部，确保它能覆盖整个屏幕空间。
• 移除ModalBottomSheet上不必要的padding修饰符，仅在sheet内部内容中添加必要的系统栏padding，避免内容被遮挡。

修改后的代码 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomExample() {
    val sheetState = rememberModalBottomSheetState()
    val scope = rememberCoroutineScope()
    var showBottomSheet by remember { mutableStateOf(false) }

    // 将ModalBottomSheet放在Scaffold外部，确保遮罩覆盖全屏
    if (showBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = {
                showBottomSheet = false
            },
            sheetState = sheetState,
            scrimColor = Color.Black.copy(alpha = 0.5f),
            modifier = Modifier.fillMaxSize()
        ) {
            // 仅在sheet内部添加必要的系统栏padding，避免内容被遮挡
            Box(
                Modifier
                    .fillMaxSize()
                    .navigationBarsPadding()
                    .imePadding()
            ) {
                Column(modifier = Modifier.fillMaxSize()) {
                    Button(onClick = {
                        scope.launch { sheetState.hide() }.invokeOnCompletion {
                            if (!sheetState.isVisible) {
                                showBottomSheet = false
                            }
                        }
                    }) {
                        Text("Hide bottom sheet")
                    }
                }
            }
        }
    }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("My App") },
                navigationIcon = {
                    IconButton(onClick = { /* Handle navigation icon click */ }) {
                        Icon(Icons.Filled.Menu, contentDescription = "Menu")
                    }
                }
            )
        },
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show bottom sheet") },
                icon = { Icon(Icons.Filled.Add, contentDescription = "") },
                onClick = {
                    showBottomSheet = true
                }
            )
        }
    ) { contentPadding ->
        Box(
            Modifier
                .padding(paddingValues = contentPadding)
                .fillMaxSize()
        ) {
            // 主内容区域
        }
    }
}

关键修改说明 #

1. 将ModalBottomSheet从Scaffold的content区域移出，作为顶层组件，让遮罩可以覆盖包括TopAppBar在内的整个屏幕。
2. 移除ModalBottomSheet上的navigationBarsPadding、statusBarsPadding等修饰符，消除对遮罩范围的限制。
3. 在sheet内部的内容容器中保留navigationBarsPadding和imePadding，确保sheet内容不会被系统栏或输入法遮挡。

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