Jetpack Compose - 底部导航栏不显示嵌套的 navGraph

Question

我正在使用 Jetpack Compose 开发一个 android 应用程序。 现在，我有几个屏幕（登录、注册、消息、配置文件和设置）。 我使用根 NavGraph 来托管身份验证和主屏幕的 navGraphs（请参阅下面的代码）。

RootNavGraph.kt

@Composable
fun RootNavGraph(navController: NavHostController) {
NavHost(
        navController = navController,
        startDestination = AUTHENTICATION_ROUTE,
        route = ROOT_ROUTE
    ) {
        authNavGraph(navController = navController)
        bottomNavGraph(navController = navController)
    }
}

authNavGraph.kt 文件

fun NavGraphBuilder.authNavGraph(navController: NavHostController) {

    navigation(
        startDestination = AuthenticationScreens.Login.route,
        route = AUTHENTICATION_ROUTE
    ) {
        composable(route = AuthenticationScreens.Login.route) {
            LoginPage(navController = navController)
        }
        composable(route = AuthenticationScreens.Register.route) {
            RegisterPage(navController = navController)
        }
    }
}

底部导航图.kt

fun NavGraphBuilder.bottomNavGraph(navController: NavHostController) {
    navigation(
        startDestination = BottomBarScreen.Messages.route,
        route = BOTTOM_ROOT_ROUTE
    ) {

        composable(route = BottomBarScreen.Messages.route) {
            Messages()
        }
        composable(route = BottomBarScreen.Profile.route) {
            Profile(navController = navController)
        }
        composable(route = BottomBarScreen.Settings.route) {
            Settings()
        }
    }
}

我有包含底部导航栏的 MainScreen。

@Composable
fun MainScreen() {

    val navController = rememberNavController()
    Scaffold(
        bottomBar = {
            BottomBar(navController = navController)
        }
    ) {
//bottomNavGraph(navController)
    }
}

@Composable
fun BottomBar(navController: NavHostController) {

    val screens = listOf(
        BottomBarScreen.Messages,
        BottomBarScreen.Profile,
        BottomBarScreen.Settings
    )
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentDestination = navBackStackEntry?.destination

    BottomNavigation() {
        screens.forEach { screen ->
            AddItem(
                screen = screen,
                currentDestination = currentDestination,
                navController = navController
            )
        }
    }
}

@Composable
fun RowScope.AddItem(
    screen: BottomBarScreen,
    currentDestination: NavDestination?,
    navController: NavHostController
) {

    BottomNavigationItem(
        label = {
            Text(text = screen.title)
        },
        alwaysShowLabel = false,
        icon = {
            Icon(imageVector = screen.icon, contentDescription = "Navigation Icon")
        },
        selected = currentDestination?.hierarchy?.any {
            it.route == screen.route
        } == true,
        unselectedContentColor = LocalContentColor.current.copy(alpha = ContentAlpha.disabled),
        onClick = {
            navController.navigate(screen.route) {
                popUpTo(navController.graph.findStartDestination().id)
                launchSingleTop = true
            }
        }
    )
}

我的问题是：切换到使用嵌套导航图后，我不能直接在 MainScreen 中使用 bottomNavGraph，因为它不再是 NavHost，因此底部导航栏不显示。 如果有人可以帮助我，我将不胜感激。

Answer 1

对于底部导航，使用 NavHost 显示底部栏

fun HomeNavGraph(navHostController: NavHostController) {
    NavHost(
        navController = navHostController,
        route = Graph.Home,
        startDestination = BottomBar.Home.route
    ) {
        composable(BottomBar.Home.route){
            HomeScreenContent()
        }

然后在您的主屏幕脚手架中使用此图

fun HomeScreen(navController: NavHostController = rememberNavController()) {
    Scaffold(bottomBar = {
        BottomNavigation(navController = navController)
    }) {
        HomeNavGraph(navHostController = navController)
    }

最后在 rootgraph 中使用这个主屏幕 class 和你的 rootgraph 路由

fun RootNavigationGraphBuilder(navHostController: NavHostController) {
    NavHost(navController = navHostController, startDestination = Graph.Authentication, route = Graph.Root) {
        authNavGraph(navHostController)
        composable(route = Graph.Home){
            HomeScreen()
        }
    }

这是我在代码中使用的示例路线

object Graph {
    const val Root = "root_graph"
    const val Authentication = "auth_graph"
    const val Home = "home_graph"

}