带有嵌套导航图和顶栏图标的导航抽屉

Question

我正在尝试在撰写项目中实现导航抽屉。

我正在努力：

• 有一个启动/登录屏幕，我不想想要显示打开抽屉的顶部栏。成功登录后，导航至主屏幕。
• 有一个主屏幕，我想在其中显示一个带有标题的顶栏和一个用于打开/关闭抽屉的图标
• 从主屏幕（或子可组合项），我需要导航到详细可组合项，其中有一个带有用于导航回来的图标的顶栏。

我也尝试通过嵌套导航来实现这一点，因为抽屉将导航到不同的列表屏幕，其中也将有其详细信息屏幕等。

我觉得这很令人困惑，我不知道是否最好用行为相同的不同抽屉包裹每个屏幕，或者用一个抽屉包裹所有内容，并根据当前路线在运行时以某种方式修改顶栏，或类似的东西。

知道如何做到这一点吗？

谢谢！

Answer 1

1.  Single Drawer Layout: Use a single ModalNavigationDrawer for the entire app. This simplifies navigation and ensures consistency.
2.  Dynamic Top Bar: Use a remember state or currentBackStackEntry to customize the top bar based on the current route.
3.  Navigation Setup: Use nested navigation graphs to organize the navigation for splash/login, main, and detail screens.
4.  Scaffold Layout: Combine Scaffold with a Drawer and TopBar to provide a cohesive UI.

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)

    // Define routes for better maintainability
    val splashRoute = "splash"
    val loginRoute = "login"
    val mainRoute = "main"
    val detailRoute = "detail/{id}"

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = { AppDrawer(navController = navController) }
    ) {
        val currentBackStackEntry = navController.currentBackStackEntryAsState()
        val currentRoute = currentBackStackEntry.value?.destination?.route

        val showTopBar = when (currentRoute) {
            splashRoute, loginRoute -> false
            else -> true
        }

        Scaffold(
            topBar = {
                if (showTopBar) {
                    AppTopBar(
                        currentRoute = currentRoute,
                        navController = navController,
                        drawerState = drawerState
                    )
                }
            },
            content = { padding ->
                NavHost(
                    navController = navController,
                    startDestination = splashRoute,
                    modifier = Modifier.padding(padding)
                ) {
                    // Splash/Login Screen
                    composable(splashRoute) {
                        SplashScreen(onNavigateToLogin = {
                            navController.navigate(loginRoute) {
                                popUpTo(splashRoute) { inclusive = true }
                            }
                        })
                    }

                    composable(loginRoute) {
                        LoginScreen(onLoginSuccess = {
                            navController.navigate(mainRoute) {
                                popUpTo(loginRoute) { inclusive = true }
                            }
                        })
                    }

                    // Main Screen with nested navigation
                    navigation(startDestination = "main/home", route = mainRoute) {
                        composable("main/home") {
                            MainScreen(onNavigateToDetail = { id ->
                                navController.navigate("detail/$id")
                            })
                        }

                        composable(detailRoute) { backStackEntry ->
                            val id = backStackEntry.arguments?.getString("id")
                            DetailScreen(id = id, onBack = { navController.popBackStack() })
                        }
                    }
                }
            }
        )
    }
}