導航

導覽是指允許使用者在應用程式的不同內容片段中，自由進行瀏覽、進入及退出的互動方式。

Android Jetpack 的 Navigation 元件包含 Navigation 程式庫、Safe Args Gradle 外掛程式，以及可協助您實作應用程式導覽功能的工具。Navigation 元件可處理各種導覽用途，包括簡單的按鈕點擊，或較為複雜的應用程式列和導覽匣等模式。

核心概念

下表概略說明導覽中的關鍵概念，以及用來實作這些概念的主要類型。

概念

目的

類型

舉辦派對

包含目前導覽目的地的 UI 元素。也就是說，當使用者瀏覽應用程式時，應用程式會在導覽主機中切換目的地。

圖表

一種資料結構，用於定義應用程式中的所有導覽目的地，以及這些目的地如何連結在一起。

NavGraph

控場

用於管理不同目的地之間導覽的中央協調器。控制器提供前往不同目的地、處理深層連結、管理返回堆疊等方法。

NavController

到達網頁

導覽圖中的節點。當使用者前往這個節點時，主機就會顯示該節點的內容。

NavDestination

通常是在建構導覽圖時建立。

路線

唯一識別目的地和目的地所需的任何資料。

您可以使用路線導航。路線會帶你前往目的地。

任何可序列化的資料類型。

優點和功能

Navigation 元件提供許多其他好處和功能，包括：

  • 動畫和轉場效果：為動畫和轉場效果提供標準化資源。
  • 深層連結：實作並處理可將使用者直接導向目的地的深層連結。
  • UI 模式：只需極少的額外工作，即可支援導覽匣和底部導覽等模式。
  • 類型安全性：支援在類型安全性的情況下，在目的地之間傳遞資料。
  • ViewModel 支援：可將 ViewModel 的範圍限定為導覽圖，在圖表的目的地之間共用 UI 相關資料。
  • 片段交易：完全支援並處理片段交易。
  • 返回和向上：根據預設，正確處理返回和向上動作。

設定環境

如要在專案中加入導覽支援，請將以下依附元件加入應用程式的 build.gradle 檔案：

GroovyKotlin
plugins {
  // Kotlin serialization plugin for type safe routes and navigation arguments
  id 'org.jetbrains.kotlin.plugin.serialization' version '2.0.21'
}
  
dependencies {
  def nav_version = "2.8.9"

  // Jetpack Compose Integration
  implementation "androidx.navigation:navigation-compose:$nav_version"

  // Views/Fragments Integration
  implementation "androidx.navigation:navigation-fragment:$nav_version"
  implementation "androidx.navigation:navigation-ui:$nav_version"

  // Feature module support for Fragments
  implementation "androidx.navigation:navigation-dynamic-features-fragment:$nav_version"

  // Testing Navigation
  androidTestImplementation "androidx.navigation:navigation-testing:$nav_version"

  // JSON serialization library, works with the Kotlin serialization plugin.
  implementation "org.jetbrains.kotlinx:kotlinx-serialization-json:1.7.3"
}
 
plugins {
  // Kotlin serialization plugin for type safe routes and navigation arguments
  kotlin("plugin.serialization") version "2.0.21"
}

dependencies {
  val nav_version = "2.8.9"

  // Jetpack Compose integration
  implementation("androidx.navigation:navigation-compose:$nav_version")

  // Views/Fragments integration
  implementation("androidx.navigation:navigation-fragment:$nav_version")
  implementation("androidx.navigation:navigation-ui:$nav_version")

  // Feature module support for Fragments
  implementation("androidx.navigation:navigation-dynamic-features-fragment:$nav_version")

  // Testing Navigation
  androidTestImplementation("androidx.navigation:navigation-testing:$nav_version")

  // JSON serialization library, works with the Kotlin serialization plugin
  implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.7.3")
}

如要進一步瞭解如何將其他架構元件新增至專案，請參閱「將元件新增至專案」。

後續步驟

如需更多有關 Navigation 元件的說明文件和資源，請參閱下列資源。

詳細指南

如要進一步瞭解如何實作導覽主機和 NavController，以及如何與 Compose 和其他 UI 架構互動，請參閱下列指南：

程式碼研究室

影片

範例

Jetsnack sample

Jetsnack is a sample snack ordering app built with Jetpack Compose. To try out this sample app, use the latest stable version of Android Studio. You can clone this repository or import the project from Android Studio following the steps here. This

Jetcaster sample 🎙️

Jetcaster is a sample podcast app, built with Jetpack Compose. The goal of the sample is to showcase building with Compose across multiple form factors (mobile, TV, and Wear) and full featured architecture. To try out this sample app, use the latest

Jetchat sample

Jetchat is a sample chat app built with Jetpack Compose. To try out this sample app, use the latest stable version of Android Studio. You can clone this repository or import the project from Android Studio following the steps here. This sample