折叠状态BottomSheet在透明导航栏下可见的Jetpack Compose适配问题

针对你遇到的折叠状态内容外露、展开无遮罩/导航栏下显背景、点击外部无法关闭这三个问题，核心解决方案是使用ModalBottomSheetLayout并正确处理系统内边距，以下是具体实现步骤和代码：

关键修复点说明 #

1. 用ModalBottomSheetLayout替代BottomSheetScaffold：它原生支持模态遮罩和点击外部关闭功能，解决遮罩缺失和关闭问题。
2. 完全隐藏折叠状态内容：使用Hidden状态而非Collapsed，确保折叠时BottomSheet彻底不显示。
3. 处理导航栏内边距：给BottomSheet内容添加导航栏内边距，避免展开时内容被遮挡，同时保证折叠时无外露。

完整代码示例 #

@Composable
fun MainScreen() {
    // 管理BottomSheet状态，默认Hidden确保完全隐藏
    val sheetState = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Hidden,
        skipPartiallyExpanded = true // 可选：跳过半展开状态
    )
    val scope = rememberCoroutineScope()

    ModalBottomSheetLayout(
        sheetState = sheetState,
        // 设置BottomSheet背景色，覆盖导航栏下方区域
        sheetBackgroundColor = Color(0XFF0F9D58),
        sheetContent = {
            // 添加导航栏内边距，避免内容被导航栏遮挡
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .navigationBarsPadding()
                    .padding(vertical = 24.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = "Bottom sheet!", fontSize = 20.sp, color = Color.White)
                Button(onClick = { scope.launch { sheetState.hide() } }) {
                    Text("关闭")
                }
            }
        },
        // 主内容区域背景透明，复用全局渐变背景
        content = {
            Scaffold(
                topBar = {
                    AppTopAppBar(title = "Some screen")
                },
                // 手动处理内边距，适配全局关闭DecorFitsSystemWindows的设置
                contentWindowInsets = WindowInsets(0, 0, 0, 0)
            ) { innerPadding ->
                Column(
                    modifier = Modifier
                        .padding(innerPadding)
                        .fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Button(onClick = { scope.launch { sheetState.show() } }) {
                        Text("打开BottomSheet")
                    }
                }
            }
        }
    )
}

// 全局渐变背景的顶层App组件
@Composable
fun App() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(Color(0xFFE0F7FA), Color(0xFFB2EBF2))
                )
            )
    ) {
        MainScreen()
    }
}

额外说明 #

• 全局背景设置：确保顶层App组件的渐变背景覆盖整个屏幕，所有子页面（包括Scaffold和ModalBottomSheetLayout的content区域）都使用透明背景，实现背景复用。
• 系统内边距处理：因为Activity中设置了WindowCompat.setDecorFitsSystemWindows(window, false)，所有页面内容的内边距都需要手动通过navigationBarsPadding()、statusBarsPadding()或innerPadding来处理。

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