Jetpack Compose 导航：登录屏幕和带有底部导航的不同屏幕

Question

我的目标是拥有一个 LoginScreen，我可以从中导航到 InternalScreen。 InternalScreen 应该 have/be 一个底部导航栏，可以导航到内部 space 中的多个其他 screens/routes。

这就是我想象中的 NavGraph 的样子：

 - LoginScreen
 - internal space
   - InternalScreen with BottomNavigation
     - some fragment
     - some other fragment

我的想法是在 InternalScreen 可组合项中创建一个带有 BottomNavigationBar 的 Scaffold，但我没有把它放在我的 NavGraph 中的地方，因为我说过 NavGraph 还必须包含 BottomNavigationBar.

的不同路线

我应该如何处理这个问题？很抱歉，如果这个问题已经得到解答，我找不到关于这个特殊案例的任何信息。

Answer 1

我认为登录 screen/flow 必须是应用程序导航流程的一部分。总之，您的应用程序必须对 isLoggedIn 状态作出反应，该状态应该是全局的，并且在用户未登录的情况下，必须显示登录屏幕。

这是我所做的：

@Composable
fun MainNavigation(
    viewModel: MainViewModel,
    navController: NavHostController,
) {
    val auth = viewModel.auth
    val initialRoute =
        if (auth.isLoggedIn()) BooksFeature.route else LoginFeature.route

    AnimatedNavHost(
        navController,
        startDestination = initialRoute
    ) {
        loginGraph(auth, navController)
        booksGraph(auth, navController)
        settingsGraph(navController)
    }
}

MainNavigation 可组合项是我应用程序的根（在 MainActivity 的 setContent 中调用）。应用程序的每个功能都有一个导航图。点赞 booksGraph:

fun NavGraphBuilder.booksGraph(
    auth: Auth, // this is a simple class which 
                // knows if the user is logged in
    navController: NavHostController
) {
    navigation(
        route = BooksFeature.route,
        startDestination = BooksList.route,
    ) {
        composable("ScreenA") {
            ScreenA()
        }
        ...
    }
}

在我的 activity 中（我只使用一个 activity），我正在观察登录状态并正确地重定向到登录屏幕。

private fun launchLoginObserver() {
    lifecycleScope.launch(Dispatchers.Main) {
        mainViewModel.isLoggedIn.collect { isLoggedInState ->
            if (isLoggedInState == false) {
                navigationController.navigate(LoginScreen.route) {
                    popUpTo(0) // reset stack
                }
            }
        }
    }
}

如果您想查看完整的实现，这里是 my repository 的 link。

Jetpack Compose 导航：登录屏幕和带有底部导航的不同屏幕

Jetpack Compose navigation: login screen and different screen with bottom navigation

android-jetpack-compose

jetpack-compose-navigation