Jetpack Compose + Navigation - 使用 BottomNavBar 的嵌套导航

Question

我正在尝试使用 Jetpack Compose + Jetpack Navigation 实现以下屏幕流程：

导航概念

实际上，我可以编写两个单例：

• SplashScreen --> HomeScreen（没有 BottomNavBar）
• 主屏幕（带有 BottomNavBar）--> 选项卡

我无法对整个问题进行编码。 事实上，我对 NavHost 的管理有疑问。 在第一种情况下（SplashScreen -> HomeScreen）我需要在 scope 高位调用 NavHost：

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        MyAppTheme {
            //init the Navigation Controller for screen navigation
            val navController = rememberNavController()

            //setup the Navigation Graph
            SetupNavGraph(navController)

而在第二种情况下，我需要在Scaffold可组合项的innerPadding scope 中调用它：

fun MainScreen(navController: NavHostController) {

    Scaffold(
        bottomBar = {
            BottomNavBar(navController)
        }
    ) { //innerPadding scope
        //setup the Navigation Graph
        SetupNavGraph(navController)
    }
}

请假设 SetupNavGraph SetupNavGraph() function 按预期工作（调用NavHost生成导航树）

• 我尝试使用两个NavHost但没有成功。
• 如果我在setContent()中设置NavHost ，我就可以加载闪屏并移动到空的BottomNavBar屏幕。 如果我单击BottomNavElements ，我可以导航到子选项卡（在上面的示例中“收藏夹”、“音乐”、“地点”、“新闻”）但是BottomNavBar消失了
• 我无法在innerPadding scope 中设置NavHost ，因为它仅在切换到主屏幕后才加载（在上面的示例中“Favorite Tab”+ BottomBarNav）

我发现的唯一解决方法是在每个 BottomNav 子选项卡中生成BottomNavBar可组合项，但这会生成我想避免的可见过渡效果，而且通常这似乎不是一个好的做法。

Answer 1

好的，我找到了解决方案。 这是实现预期结果的步骤：

1. 创建两个不同的 NavGraph，一个用于 Splash->MainScreen，另一个用于 BottomNavBar

const val ROOT_ROUTE = "root"

@Composable
fun SetupRootNavGraph(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = Screen.FirstScreen.route,
        route = ROOT_ROUTE
    ) {
        composable(Screen.FirstScreen.route) { FirstScreen(navController)}
        composable(Screen.SecondScreen.route) { MainScreen(navController)}
    }
}

const val BOTTOM_BAR_ROUTE = "bottomBar"

@Composable
fun SetupNavGraphBottomBar(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = BottomBarScreen.FirstElement.route,
        route = BOTTOM_BAR_ROUTE
    ) {
        composable(BottomBarScreen.FirstElement.route) { FirstElementScreen() }
        composable(BottomBarScreen.SecondElement.route) { SecondElementScreen() }
        composable(BottomBarScreen.ThirdElement.route) { ThirdElementScreen() }
    }
}

2. 在MainActivity中的setContent()之后初始化NavController和RootNavGraph 。 这将负责 SplashScreen -> MainScreen 导航树。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {

                //init the Navigation Controller for screen navigation
                val navController = rememberNavController()

                //setup the Root Navigation Graph
                SetupRootNavGraph(navController)
            }
        }
    }
}

3. 在您拥有 BottomNavBar（示例中的“MainScreen”）的屏幕中重新初始化NavController ，并在innerPadding BottomNavGraph中为其分配 BottomNavGraph。

@Composable
fun MainScreen(navController: NavHostController) {

    //Re-initialize the NavController to set a new NavGraph
    val navControllerBottomBar = rememberNavController()

    Scaffold(
        bottomBar = {
            BottomNavBar(navControllerBottomBar)
        }
    ) {
        //setup the Navigation Graph
        SetupNavGraphBottomBar(navControllerBottomBar, user)
    }
}

这会很有魅力！ 当然，您需要构建BottomNavBar以管理官方文档中记录的导航