Jetpack Compose 嵌套导航和 BottomAppBar

Question

我正在尝试使用 Jetpack 组合导航，但我在理解嵌套导航和布局脚手架方面遇到了问题。

我有一个这样的应用程序屏幕结构

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

这是粗略的规格

• 根将位于 MainActivity 中并具有 NavHost 和脚手架。
• A 和 B 中的应用栏会有所不同。
• B中会有一个底部导航栏，可以用来在C和D之间导航

我一直在查看文档和 StackOverflow，据我所知，最好将脚手架放在 NavHost 之外。

但是，对于我的情况，如果我无法访问 A 和 B 中的脚手架，我该如何更新 A 和 B 中的应用程序栏？ 我只能想像下面的代码那样在脚手架中做一个分支

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

我还需要 A 中的访问脚手架 state。

那么解决此类问题的最佳方法是什么？

Answer 1

我在使用NavHost和使用 multi 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），我们就会遇到麻烦。

第二种解决方案是我们可以将多fragment与自己的NavHost, but it's not all based on Composable 组件。

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