使用伴奏者导航动画时如何隐藏 Jetpack Compose 中的底部栏

Question

情况

我正在使用Kotlin&编写一个非常简单的应用程序Android Jetpack Compose

我有一个scaffold包含我的navHost和一个bottomBar. 我可以用它bottomBar在三个主屏幕之间导航。其中一个主屏幕有一个详细信息屏幕，该屏幕不应显示bottomBar.

---

我的代码

到目前为止，这是小菜一碟：

// MainActivitys onCreate

setContent {
    val navController = rememberAnimatedNavController()
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route?.substringBeforeLast("/")

    BottomBarNavTestTheme {
        Scaffold(
            bottomBar = {
                if (currentRoute?.substringBeforeLast("/") == Screen.Detail.route) {
                    MyBottomNavigation(
                        navController,
                        currentRoute,
                        listOf(Screen.Dashboard, Screen.Map, Screen.Events) // main screens
                    )
                }
            }
        ) { innerPadding ->
            NavHost( // to be replaced by AnimatedNavHost
                navController = navController,
                startDestination = Screen.Dashboard.route,
                modifier = Modifier.padding(innerPadding)
            ) {
                composable(Screen.Dashboard.route) { DashboardScreen() }
                composable(Screen.Map.route) { MapScreen { navController.navigate(Screen.Detail.route) } }
                composable(Screen.Events.route) { EventsScreen() }
                composable(Screen.Detail.route) { MapDetailScreen() }
            }
        }
    }
}

---

问题：

我想要在屏幕之间进行转换，因此我使用伴奏导航动画：只需替换NavHost为AnimatedNavHost。

当从 导航mainScreen到detailScreen时，会产生奇怪的效果：

1. 底部Bar隐藏
2. 主屏幕调整大小：（参见底部对齐的文本）
3. 发生到详细信息屏幕的动画。

这看起来很糟糕，我该如何修复它？

---

解决方案

最佳解决方案如下所示：

• 主屏幕保留底部栏并淡出。
• 同时进入详情页面，没有底栏。

更新

我已经离开这个项目了。对我来说，这个问题不再相关，我可能永远无法接受答案。然而，似乎有很多人对此感兴趣，所以我将对此保持开放。

Answer 1

所以我们采取了解决方法：

• 在顶层now不再scaffold包含bottomBar
• 现在每个需要它的屏幕都有自己的bottomBar。

这工作得很好，只是波纹点击bottomBar并不像我们希望的那么平滑（我们正在点击中间交换它，所以这是可以预料的）

这还解决了一个问题，即屏幕具有可滚动内容，其滚动距离由于隐藏底部栏时发生变化而有点混乱。