Jetpack Compose条件式底部导航先于页面显示的问题排查

我正在为应用实现BottomNavigationBar，但运行时出现视觉异常。我设置了底部导航栏的显示条件，代码如下：

data class AppState(
   val a: Int // sample
) {
    // other code
    private val currentDestination: NavDestination?
        @Composable get() = navController.currentBackStackEntryAsState().value?.destination

    private val bottomBarRoutes = bottomBarTabs.map { it.direction.route }

    val shouldShowBottomBar: Boolean
        @Composable get() = currentDestination?.route in bottomBarRoutes
}

我通过Scaffold搭配NavHost来显示底部导航栏：

Scaffold(
    bottomBar = { if (appState.shouldShowBottomBar) AppBottomBar() }
) { padding ->
    // NavHost setup
    AppNavigation(
        // params,
        modifier = Modifier.padding(padding)
    )
}

代码逻辑上可实现导航栏的条件显示，但页面切换时出现视觉bug：目标页面内容被挤压，原因是导航栏会先于目标页面完成显示。

问题演示：页面从详情页返回首页时，底部导航栏提前出现，导致首页内容被短暂挤压变形。

日志显示问题根源在于显示条件依赖导航回退栈：回退栈变化时导航栏就会触发显示，但此时原页面尚未销毁：

[Screen Lifecycle] Home Screen Started

[Action]           Navigating to details Screen

[Screen Lifecycle] Details Screen Started

[Screen Lifecycle] Home Screen Destroyed

[Action]           Navigation Back

[Screen Lifecycle] Showing Navigation

[Screen Lifecycle] Home Screen Started

[Screen Lifecycle] Details Screen Destroyed

• 查阅多篇博客和视频，发现这类示例普遍存在相同bug
• 参考多个项目代码并运行，问题仍未解决
• 尝试寻找页面组合完成的监听方法，但未找到可行方案
• 在Stack Overflow上查找相关问题，未得到有效解决方法

我的项目为多模块架构，因此像Google单模块示例应用那样将导航栏传入具体页面的方案并不适用

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