嵌套图

应用中的登录流程、向导或其他子流程通常是嵌套导航图的最佳表示形式。通过以这种方式嵌套独立的子导航流程，您可以更轻松地理解和管理应用界面的主流程。

此外，嵌套图可以重复使用。它们还提供了一定程度的封装，即嵌套图之外的目的地无法直接访问嵌套图内的任何目的地。相反，这些目的地应 navigate() 到嵌套图本身，在嵌套图中，内部逻辑可以发生更改，而不会影响图表的其余部分。

示例

应用的顶级导航图应从用户启动应用时看到的初始目的地开始，且应包含他们在应用中四处浏览时看到的目的地。

图 1. 顶级导航图。

以图 1 中的顶级导航图为例，假设您 想要要求用户查看 title_screen 和 register 屏幕 仅在应用首次启动时才触发。之后，用户信息 在以后启动应用时，您应直接帮助用户 match 界面。

最佳做法是，将 match 屏幕设置为 顶级导航图，并将标题和注册屏幕移至嵌套的 如图 1 所示：

图 2. 顶级导航图现在包含一个嵌套图。

匹配屏幕启动后，检查是否有注册用户。如果 如果用户未注册，请将其转到注册屏幕。

如需详细了解条件导航情形，请参阅条件导航。

Compose

如需使用 Compose 创建嵌套导航图，请使用 NavGraphBuilder.navigation() 函数。在向图表中添加目的地时，您可以像使用 NavGraphBuilder.composable() 和 NavGraphBuilder.dialog() 函数一样使用 navigation()。

主要区别在于，navigation 会创建嵌套图而非新目的地。然后，您在以下时间内调用 composable() 和 dialog()： navigation() 的 lambda 将目的地添加到嵌套图中。

请考虑以下代码段如何使用 Compose 实现图 2 中的图表：

// Routes
@Serializable object Title
@Serializable object Register

// Route for nested graph
@Serializable object Game

// Routes inside nested graph
@Serializable object Match
@Serializable object InGame
@Serializable object ResultsWinner
@Serializable object GameOver

NavHost(navController, startDestination = Title) {
   composable<Title> {
       TitleScreen(
           onPlayClicked = { navController.navigate(route = Register) },
           onLeaderboardsClicked = { /* Navigate to leaderboards */ }
       )
   }
   composable<Register> {
       RegisterScreen(
           onSignUpComplete = { navController.navigate(route = Game) }
       )
   }
   navigation<Game>(startDestination = Match) {
       composable<Match> {
           MatchScreen(
               onStartGame = { navController.navigate(route = InGame) }
           )
       }
       composable<InGame> {
           InGameScreen(
               onGameWin = { navController.navigate(route = ResultsWinner) },
               onGameLose = { navController.navigate(route = GameOver) }
           )
       }
       composable<ResultsWinner> {
           ResultsWinnerScreen(
               onNextMatchClicked = {
                   navController.navigate(route = Match) {
                       popUpTo(route = Match) { inclusive = true }
                   }
               },
               onLeaderboardsClicked = { /* Navigate to leaderboards */ }
           )
       }
       composable<GameOver> {
           GameOverScreen(
               onTryAgainClicked = {
                   navController.navigate(route = Match) {
                       popUpTo(route = Match) { inclusive = true }
                   }
               }
           )
       }
   }
}

要直接 Navigate 到嵌套的目的地，请按照如下方式使用路线类型 到任何其他目标位置这是因为路由是一个全局概念 确定任何屏幕都可以导航到的目的地：

navController.navigate(route = Match)

XML

使用 XML 时，您可以使用 Navigation Editor 创建嵌套图。具体步骤如下：

  1. 在 Navigation Editor 中，按住 Shift 键，然后点击您想要添加到嵌套图中的目的地。

  2. 右键点击以打开上下文菜单，然后依次选择 Move to Nested Graph > New Graph。目的地包含在嵌套图中。图 2 显示了 Navigation Editor 中的嵌套图：

    图 2. Navigation Editor 中的嵌套图

  3. 点击嵌套图。此时 Attributes 面板中会显示以下属性：

    • Type，其中包含“Nested Graph”
    • ID，其中包含系统为嵌套图分配的 ID。本次 ID 用于从代码中引用嵌套图。

  4. 双击嵌套图以显示其目的地。

  5. 点击 Text 标签页，以切换到 XML 视图。一个嵌套导航图已添加到该图中。此导航图具有自己的 navigation 元素，以及自己的 ID 和一个指向嵌套图中第一个目的地的 startDestination 属性：

    <?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:android="http://schemas.android.com/apk/res/android"
   app:startDestination="@id/mainFragment">
   <fragment
       android:id="@+id/mainFragment"
       android:name="com.example.cashdog.cashdog.MainFragment"
       android:label="fragment_main"
       tools:layout="@layout/fragment_main" >
       <action
           android:id="@+id/action_mainFragment_to_sendMoneyGraph"
           app:destination="@id/sendMoneyGraph" />
       <action
           android:id="@+id/action_mainFragment_to_viewBalanceFragment"
           app:destination="@id/viewBalanceFragment" />
   </fragment>
   <fragment
       android:id="@+id/viewBalanceFragment"
       android:name="com.example.cashdog.cashdog.ViewBalanceFragment"
       android:label="fragment_view_balance"
       tools:layout="@layout/fragment_view_balance" />
   <navigation android:id="@+id/sendMoneyGraph" app:startDestination="@id/chooseRecipient">
       <fragment
           android:id="@+id/chooseRecipient"
           android:name="com.example.cashdog.cashdog.ChooseRecipient"
           android:label="fragment_choose_recipient"
           tools:layout="@layout/fragment_choose_recipient">
           <action
               android:id="@+id/action_chooseRecipient_to_chooseAmountFragment"
               app:destination="@id/chooseAmountFragment" />
       </fragment>
       <fragment
           android:id="@+id/chooseAmountFragment"
           android:name="com.example.cashdog.cashdog.ChooseAmountFragment"
           android:label="fragment_choose_amount"
           tools:layout="@layout/fragment_choose_amount" />
   </navigation>
</navigation>

  6. 在代码中，传递将根图连接到嵌套图的操作的资源 ID：

Kotlin

view.findNavController().navigate(R.id.action_mainFragment_to_sendMoneyGraph)

Java

Navigation.findNavController(view).navigate(R.id.action_mainFragment_to_sendMoneyGraph);
  1. 返回 Design 标签页，然后通过点击 Root 回到根图。

使用 include 功能引用其他导航图

将图表的结构模块化的另一种方法是，使用父级导航图中的 <include> 元素将一个图表包含在另一个图表中。这样一来，就可以完全在单独的模块或项目中定义包含的图，从而最大限度提高可重用性。

以下代码段演示了如何使用 <include>：

<!-- (root) nav_graph.xml -->
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_graph"
    app:startDestination="@id/fragment">

    <strong><include app:graph="@navigation/included_graph" /></strong>

    <fragment
        android:id="@+id/fragment"
        android:name="com.example.myapplication.BlankFragment"
        android:label="Fragment in Root Graph"
        tools:layout="@layout/fragment_blank">
        <strong><action
            android:id="@+id/action_fragment_to_second_graph"
            app:destination="@id/second_graph" /></strong>
    </fragment>

    ...
</navigation>

<!-- included_graph.xml -->
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    <strong>android:id="@+id/second_graph"</strong>
    app:startDestination="@id/includedStart">

    <fragment
        android:id="@+id/includedStart"
        android:name="com.example.myapplication.IncludedStart"
        android:label="fragment_included_start"
        tools:layout="@layout/fragment_included_start" />
</navigation>

其他资源

如需详细了解 Navigation，请参阅下面列出的其他资源。

示例

Codelab

视频