Jetpack Compose嵌套导航和底部应用栏

Question

我试图使用Jetpack Compose Navigation，但我在理解嵌套导航和布局Scaffold方面遇到了问题。

我的应用程序屏幕结构如下：

root
├─ A
├─ B <- Had a bottom navigation bar
│  ├─ C
│  ├─ D

这是粗略的规格：

• 根将位于MainActivity中，具有NavHost和scaffold。
• A和B中的应用程序栏将不同。
• B中将有一个底部导航栏，可用于在C和D之间导航

我已经查看了文档和StackOverflow，从中了解到最好将scaffold放在NavHost之外。

但是，对于我的情况，如果我无法访问A＆B内部的scaffold，如何更新A和B中的应用程序栏？我只能想到在scaffold中进行分支处理，如下面的代码：

Scaffold(
    scaffoldState = scaffoldState,
    topBar = {
        when {
            currentDestination?.parent?.route == "Home" -> {
                TopAppBar(
                    title = {
                        Text("Home")
                    },
                )
            }
            currentDestination?.route == "Other screen" -> {
                 ....
            }

我需要在A地区建立一个访问脚手架状态。

那么，解决这种问题的最佳方法是什么？

- Andra

---

我有同样的问题，并且在嵌套导航中还有另一个问题。我有类似的结构，因为路由B有自己的底部导航栏和自己的NavHost，所以我如何从屏幕C（从选项卡栏打开）导航到路由A？请参见此处：https://dev59.com/DMPra4cB1Zd3GeqPq-Fb - xshake

我再次进行了一些搜索，发现有些人正在使用多个NavHost。请参见https://github.com/arefhosseini/compose-multi-navigation。然而，我不确定这是否是最佳方法。 - Andra

@Andra是正确的，使用多个navhost不是推荐的方法。话虽如此，我很难想出一个只使用一个navhost就能在内部级别上拥有脚手架/底栏的解决方案。 - lostintranslation

Answer 1

我有一个关于NavHost和嵌套导航与多个Scaffold的问题。

这是我的第一个解决方案：

根部有自己的NavHost，包含2个单独的页面（A和B），这些页面有自己的功能。

如果我们认为页面A是像启动屏幕这样的单页面，我们就为其创建一个基本的Scaffold组件。

如果我们认为页面B是类似Instagram底部导航的多个页面，我们应该在顶层为它创建一个NavHost。

这是我们的根：

sealed class RouteScreen(val route: String) {
    object A : RouteScreen("a")
    object B : RouteScreen("b")
}

@Composable
internal fun RootNavigation(
    modifier: Modifier = Modifier,
    appState: MultiNavigationAppState
) {
    NavHost(
        navController = appState.navController,
        startDestination = RouteScreen.A.route,
        modifier = modifier
    ) {
        addA(appState)
        addB(appState)
    }
}

private fun NavGraphBuilder.addA(
    appState: MultiNavigationAppState
) {
    composable(route = RouteScreen.A.route) {
        AScreen()
    }
}

private fun NavGraphBuilder.addB(
    appState: MultiNavigationAppState
) {
    composable(route = RouteScreen.B.route) {
        BScreen(appState)
    }
}

AScreen是一个可组合的部件，您可以在其中使用Scaffold。

BScreen与AScreen相同，但您可以创建另一个NavHost来控制选项卡。

@Composable
fun BScreen(
    appState: MultiNavigationAppState
) {
    val mainState = rememberMainState()
    Scaffold(
        bottomBar = {...}
    ) {
        BNavigation(...)
    }
}

实际上，不建议在嵌套导航中使用一个NavHost，因为如果页面有选项卡和像Instagram这样的功能，我们会遇到麻烦。

第二种解决方案是我们可以使用多个带有自己NavHost的fragment，但这并不完全基于Composable组件。

正如你所提到的，我也遇到了这个问题，你可以通过这个Github项目获得更多帮助。

- Aref

---

这里使用了2个NavHosts。 - lostintranslation