Compose ModalBottomSheet关闭动画覆盖导航栏背景，如何让导航栏背景前置？

问题场景 #

使用Compose ModalBottomSheet时，关闭（拖拽）过程中浮层的动画会覆盖导航栏背景（三键导航下，导航按钮可见但背景被覆盖）。需要实现像Instagram、Uber、Discord那样的效果：浮层关闭时滑到导航栏背景后方，导航栏背景始终保持在最上层。

补充：即使在启用enableEdgeToEdge()的纯Compose测试应用中也存在该问题，原Fragment/Compose混合应用的相关配置（如WindowCompat.setDecorFitsSystemWindows(window, false)）不影响此问题。导航栏已在主题中设置为纯色非透明：

<item name="android:navigationBarColor">@color/status_bar_color</item>

状态配图：

解决思路与实现 #

要让导航栏背景始终处于浮层上方，核心是调整导航栏的绘制层级，确保它在ModalBottomSheet的动画层之上。以下是几种可行方案：

1. 调整Window导航栏绘制优先级 #

在Activity的onCreate方法中，通过窗口配置提升导航栏背景的层级：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    WindowCompat.setDecorFitsSystemWindows(window, false)
    
    // 关键设置：允许导航栏背景绘制在内容层之上
    window.navigationBarContrastEnforced = false
    ViewCompat.getWindowInsetsController(window.decorView)?.apply {
        isAppearanceLightNavigationBars = false // 根据主题调整导航按钮颜色
        show(WindowInsetsCompat.Type.navigationBars())
    }
}

2. 配置ModalBottomSheet的WindowInsets #

为ModalBottomSheet设置专属的windowInsets，限制浮层布局范围不延伸到导航栏区域，从根源避免覆盖：

ModalBottomSheet(
    onDismissRequest = { /* 关闭逻辑 */ },
    sheetState = sheetState,
    // 浮层仅在水平和顶部方向响应导航栏内边距，底部不延伸
    windowInsets = WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top)
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(LocalWindowInsets.current.navigationBars.asPaddingValues())
    ) {
        // 浮层内容布局
    }
}

3. 自定义顶层导航栏背景 #

如果系统层级调整无效，可以在根Compose布局中添加自定义导航栏背景层，强制保持在浮层上方：

setContent {
    YourAppTheme {
        Box(modifier = Modifier.fillMaxSize()) {
            // 主内容区域（包含NavHost等）
            NavHost(navController = navController, startDestination = "home") {
                // 页面路由配置
            }
            
            // 自定义导航栏背景，始终处于顶层
            val navBarHeight = LocalWindowInsets.current.navigationBars.bottom.toDp()
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(navBarHeight)
                    .align(Alignment.BottomCenter)
                    .background(MaterialTheme.colorScheme.navigationBarColor) // 与主题颜色一致
            )
        }
    }
}

使用此方案时，需将主题中android:navigationBarColor设为透明，避免系统导航栏背景与自定义层冲突。

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