如何使用Jetpack Compose导航到非底部栏屏幕？

Question

我在Compose中有一个应用程序，startDestination设置为带底部导航栏（包含3个项目）和顶部应用栏的scaffold屏幕，我可以通过3个底部导航选项卡进行导航。但是假设我想要点击底部选项卡屏幕中的一个卡片，它应该打开一个没有底部和应用栏的详细信息屏幕 （因为Navhost位于scaffold内，所以详细信息屏幕上也会显示底部和顶部栏），那么正确的方法是什么？目前我尝试了以下方法：

1. 在新活动中启动详细屏幕。

2. 使用currentDestination路由作为状态来有条件地隐藏详细屏幕路由的底部和应用栏。

这两种方法都可行，但第一种方法的问题在于，不建议在Jetpack Navigation中使用多个活动，而应该坚持使用单个活动，它还进一步破坏了导航，如果我要从详细信息移动到另一个屏幕，则会出现问题。第二种方法的问题在于，隐藏和显示底部/顶部栏会在屏幕之间产生非常糟糕的转换效果，应用程序不会感觉流畅。

因此，我正在寻找一种适合指南的处理方式，尽管我在这方面找不到任何信息。

更新

我使用路由显示/隐藏底部和应用栏，结果发现我遇到的坏动画和延迟问题是因为我在运行调试应用程序，使用minifyEnabled true（R8）的发布应用程序，过渡非常平滑和自然，就像我想要的那样。

同时，根据Google官方Compose示例应用程序JetSnack，这是从底部栏屏幕导航到非底部栏屏幕的适当方法。感谢@vitidev在评论中指出。

- ishubhamsingh

---

隐藏和显示底部/顶部栏会在屏幕之间创建非常糟糕的过渡效果，应用程序感觉不流畅。但是，您可以控制底部/顶部栏的过渡方式和时间，因此任何“非常糟糕的过渡”都是由您的过渡代码（或缺乏代码）引起的。您能否具体说明您想要什么过渡效果（精确地说，您希望底部栏/顶部栏何时进入/离开屏幕以及与NavHost的过渡动画有何关系），以及您已经编写了哪些代码来尝试实现该过渡效果？ - ianhanniballake

@ianhanniballake您好，我目前没有使用任何转换效果，我只是在脚手架中将TopAppBar和BottomBar组件调用包装在一个if块中，该块仅在路由为底部导航项之一时为true。我还尝试过使用AnimatedVisibility，但它创建的转换效果感觉不自然。我不希望它看起来像底部和顶部栏在显示和隐藏时滑入和滑出，而是希望新屏幕出现的方式就像新活动一样，或者应该像脚手架内容部分之间的转换一样微妙。 - ishubhamsingh

'Jetsnack'从official compose samples使用第二个选项-有条件地隐藏底部栏，以适应不在底部栏中的路由。 - vitidev

Answer 1

您可以使用嵌套导航图：

• 一个主要的导航图，根据您的底部导航栏
• 每个屏幕内部都有一个嵌套的导航图，以便进一步前往

https://developer.android.com/jetpack/compose/navigation#nested-nav

- Bruno

---

但是即使我使用嵌套图形，NavHost仍然存在于scaffold中，因此进一步的屏幕仍将呈现底部和应用程序栏。 - ishubhamsingh

Answer 2

一种方法是在导航中拥有两个navControllers。一个用于主导航（底部导航栏之外的导航），另一个用于底部导航栏内部的导航。

    @Composable
fun MainNavigation() {
    val navController = rememberNavController()
    val navControllerBottomBar = rememberNavController()

    NavHost(navController = navController, startDestination ="") {
        composable("login") {
            LoginScreen()
        }
       
        composable("bottomBarNav") {
            BottomBarNavigation(navController = navControllerBottomBar)
        }

      
    }

}

// 底部导航栏

@Composable
fun BottomBarNavigation(navController: NavHostController) {

    Scaffold(
        bottomBar = {}
    ) { innerPadding ->
        val modifier = Modifier.padding(innerPadding)
        NavHost(navController, startDestination = "Home", modifier = modifier) {
        composable("home") { HomeScreen() }
      }
    }
}

我不知道这是否被推荐或有什么缺点，关于这方面的信息并不多，但它有效。

- user3701188