主页 / coding / 问题 / 79213145
Accepted
Damon
Asked: 2024-11-22 06:55:20 +0800 CST

使用 Compose，如何仅在子导航图上显示导航栏

  • 772

我正在制作一个 Kotlin Multiplatform / Compose Multiplatform 应用程序。我想要这种图表：

  • 启动画面
  • 验证屏幕
  • 主图
    • 主屏幕
    • ...
    • 设置屏幕

我想要一个导航栏来浏览我的主图，但显然，当我在 SplashScreen 或 AuthScreen 上时，我不想有这个导航栏。我以为这很容易，但奇怪的是，我找不到任何帖子询问这个问题，也找不到任何关于这个问题的文档。而且 ChatGPT 一直给我根本不起作用的代码。

我尝试在可组合块中使用另一个 NavHost，但是不起作用。就像这样：

val navController = rememberNavController()
NavHost(
    navController = navController,
    startDestination = Destination.Splash
) {
    composable<Destination.Splash> {
        SplashScreenRoot()
    }
    composable<Destination.Auth> {
        AuthScreenRoot()
    }
    composable<Destination.Main> {
        // Add navigation here
        NavHost(
            navController = navController,
            startDestination = Destination.Main.Home
        ) {
            composable<Destination.Main.Home> {
                HomeScreenRoot()
            }
            composable<Destination.Main.Settings> {
                SettingsScreenRoot()
            }
        }
    }
}

我已经看到了一种方法来做到这一点，即使用导航栏并根据当前路线显示它，但似乎很奇怪，因为这是一个非常基本的情况，所以没有更简洁的方法来做到这一点。

android-jetpack-compose

1 个回答

  1. Best Answer

    您可以通过设置包含带有 Scaffold 的导航栏的嵌套 NavHost 来实现此目的。

    val navController = rememberNavController()
NavHost(
    navController = navController,
    startDestination = Destination.Splash
) {
    composable<Destination.Splash> {
        SplashScreenRoot()
    }
    composable<Destination.Auth> {
        AuthScreenRoot()
    }
    composable<Destination.Main> {
        MainContainer()
       
    }
}

    并且 MainContainer 包含带有底部导航的嵌套 NavHost

    @Composable
private fun MainContainer() {

    val nestedNavController = rememberNavController()
    Scaffold(
        modifier = Modifier.fillMaxSize(),
        bottomBar = {
            NavigationBar {

            }
        }
    ) { paddingValues: PaddingValues ->
        NavHost(
            modifier = Modifier.padding(paddingValues),
            navController = nestedNavController,
            startDestination = Destination.Main.Home
        ) {
            addBottomNavigationGraph()
        }
    }
}

    您可以在 github repo 中查看完整示例。

    • 1

相关问题