Jetpack Compose:嵌套导航与嵌套路线中的底部栏导航

Question

我的应用程序有以下结构，因为路线B有自己的底部导航栏，因此有自己的NavHost，我如何从屏幕C(从选项卡栏打开(导航到路线a？

- Nested Route "/onboarding_route", startDestination = 'start' 
- route 'start' -> Screen 'Login' (Composable)
- route 'legal' -> Screen 'Legal' (Composable)
- Nested Route "/login_route", startDestination = 'login' 
- route 'login' -> Screen 'Login' (Composable)
- route 'register' -> Screen 'Register' (composable)
- route 'recover' -> Screen 'Recover' (composable)
- Nested Route '/main_app', startDestination 'dashboard' => with bottom navigation
- route 'dashboard' -> Screen 'Dashboard' (composable)
- route 'product' -> Screen 'Product' (composable)
- route 'profile' -> Screen 'Profile'

导航到路线"main_app"应显示底部栏导航，其中包含三个NavigationItems。我可以用一个在每个屏幕上都有底部条的支架(Dashboard，Product，Profile(来做这件事，或者我可以在顶部添加一个MainView屏幕，它用底部条固定支架：

- Nested Route '/main_app', startDestination 'mainVie/dashboard' => with bottom navigation
- route 'mainView/{tabname} => Screen 'MainView' with Scaffold & bottom bar
- route 'dashboard' -> Screen 'Dashboard' (composable)
- route 'product' -> Screen 'Product' (composable)
- route 'profile' -> Screen 'Profile'

如果我使用这个解决方案，我会遇到以下问题：在屏幕"Dashboard"中；"产品"one_answers"配置文件"我只有BottomBar的导航控制器，无法导航到"login_route"等顶级路线。

我认为这是一种非常常见的情况：你有一个入职屏幕、登录/注册屏幕，它们都没有底部栏。一旦你进入主屏幕，你想显示一个底部栏，然后你可能想从其中一个屏幕返回登录屏幕。如果整个导航都在嵌套的导航路线中分离(正如谷歌建议的那样(，我不知道如何从嵌套的屏幕导航回其中一条顶级路线。

拥有正确和干净的导航结构的最佳实践是什么？

Answer 1

首先，您有这个navGraph的mainActivity：

AnimatedNavHost(
navController = navController,
startDestination = "onBoarding",
modifier = modifier
) {
onBoardingScreen(
navigateToLegal = {
navController.navigateToLegal()
}
nestedGraphs = {
legalScreen()
}
)
loginScreen(
nestedGraphs = {
registerScreen()
recoverScreen()
}
)
mainScreen(
nestedGraphs = {
productScreen()
profileScreen()
}
)
}

然后在每个屏幕上你都可以有这样的东西：

fun NavGraphBuilder.onBoardingScreen(
nestedGraphs: NavGraphBuilder.() -> Unit,
navigateToLegal : () -> Unit
) {
navigation(
route = "onBoardingGraphRoutePattern",
startDestination ="start"
) {
composable(
route ="start",
) {
StartRoute()
}
nestedGraphs()
}
}

对于每个嵌套的屏幕，我们有两个类似的函数：

1-

fun NavController.navigateToLegal(
navOptions: NavOptions? = null
) {
this.navigate("legal", navOptions)
}

2-

fun NavGraphBuilder.legalScreen() {
composable(
route = "legal",
) {
LegalRoute()
}
}

我认为有了这种模式，你可以在主屏幕上有一个navController，每个屏幕都有嵌套的navGraph，并且可以处理你的应用程序

有关更多信息和更多示例，您可以阅读此项目：现在在安卓

希望能帮助你：(

Answer 2

您可以在这里的官方Android导航代码实验室中找到一个非常好的示例，它应该可以解决您的问题。希望能有所帮助。