作者 / 開發者關系工程師 Don Turner

在應用中的不同屏幕之間導航理應簡單明了。然而，構建穩健、可擴展且賞心悅目的導航體驗卻并非易事。多年來，Jetpack Navigation 庫一直是開發者的重要工具，但隨著 Android 界面格局的演變，尤其是 Jetpack Compose 的興起，我們意識到是時候探索一種全新的解決方案了。

我們將在本文為您介紹新推出的 Jetpack Navigation 3，這是一個專為 Compose 打造的全新導航庫。為簡潔起見，我們將其簡稱為 Nav3。這個庫采用了聲明式編程模型和 Compose 狀態作為其基本構建模塊。

為什么要推出新的導航庫？

之前的 Jetpack Navigation 庫 (有時也稱為 Nav2，因為它是第二個主版本) 最初是在 2018 年發布的，彼時還沒有 AndroidX 和 Compose 這兩個框架。雖然 Nav2 已經很好地實現了最初目標，但我們了解到，在與現代 Compose 開發模式結合使用時，Nav2 存在一些限制。

其中一個關鍵的限制是僅支持間接觀察返回堆棧狀態。這意味著可能存在兩個事實來源，從而導致應用狀態出現不一致的情況。此外，Nav2 的 NavHost 被設計為僅顯示一個目標位置 (即返回堆棧中的最頂層目標位置) 以填充可用空間。這使得實現同時顯示多個內容窗格的自適應布局 (例如大屏幕上的列表-詳情布局) 變得困難。

創立原則

Nav3 基于以下原則構建而成，旨在提供更大的靈活性并提高開發者掌控力:

您掌控返回堆棧: 作為開發者，您將擁有并控制返回堆棧，而不是將控制權交給庫。這是一個簡單的列表，由 Compose 狀態支持。具體而言，Nav3 期望您的返回堆棧為 SnapshotStateList，其中 T 可以是您選擇的任何類型。您可以通過添加或刪除項目 (T) 來進行導航，狀態的變化會被 Nav3 的界面觀測到，并自動反映在其界面上。

告別繁瑣: 我們深知您不喜歡導航庫具有無法訪問的內部組件和狀態的 "黑匣子" 式設計。Nav3 的設計秉承開放性和可擴展性原則，為您提供構建模塊和實用的默認設置。如果您想要自定義導航行為，可以深入到更低的層級，創建您自己的組件和自定義設置。

選擇您的構建模塊: Nav3 并沒有將所有行為嵌入到庫中，而是提供了更小巧的組件，您可以組合這些組件來創建更復雜的功能。我們還準備了操作指南，其中介紹了如何組合組件來解決常見的導航挑戰。

關鍵功能

動畫: 內置的過渡動畫可用于實現目標位置的切換，包括預測性返回。此外，它還擁有支持自定義動畫行為的靈活 API，允許在應用和單個屏幕級別覆寫動畫。

自適應布局: 通過使用靈活布局 API (名為 Scenes)，您可在同一布局中渲染多個目標位置 (例如，大屏設備上的列表-詳情布局)。您可借此輕松地在單窗格和多窗格布局之間切換。

狀態范圍限定: 能夠將狀態限定在返回堆棧中的目標位置范圍內，同時還可通過專用 Jetpack lifecycle 庫提供可選的 ViewModel 支持。

模塊化: API 設計允許將導航代碼拆分到多個模塊中。這縮短了構建時間并使各個功能模塊之間的職責劃分更加清晰。

基本代碼示例

為了幫助您了解 Nav3 的工作原理，我們準備了簡短的代碼示例。

// Define the routes in your app and any arguments.
dataobjectHome
dataclassProduct(valid: String)
// Create a back stack, specifying the route the app should start with.
valbackStack = remember { mutableStateListOf(Home) }
// A NavDisplay displays your back stack. Whenever the back stack changes, the display updates.
NavDisplay(
  backStack = backStack,
 // Specify what should happen when the user goes back
  onBack = { backStack.removeLastOrNull() },
 // An entry provider converts a route into a NavEntry which contains the content for that route.
  entryProvider = { route ->
   when(route) {
     isHome -> NavEntry(route) {
        Column {
          Text("Welcome to Nav3")
          Button(onClick = {
           // To navigate to a new route, just add that route to the back stack
            backStack.add(Product("123"))
          }) {
            Text("Click to navigate")
          }
        }
      }
     isProduct -> NavEntry(route) {
        Text("Product${route.id}")
      }
     else-> NavEntry(Unit) { Text("Unknown route:$route") }
    }
  }
)

開始使用并分享反饋

首先，您可以查看開發者文檔以及操作指南，其中提供了以下示例:

常見導航界面，例如導航邊欄或導航欄

條件導航，例如登錄流程

使用 Scenes 的自定義布局

我們計劃在未來為更復雜的用例提供代碼示例、技術文檔和文章。

Nav3 目前處于 Alpha 階段，這意味著我們可能會根據反饋修改 API。

Nav3 為在 Compose 應用中構建現代導航提供了靈活而強大的基礎。我們非常期待看到您借此打造的精彩作品。

您可以在 io.google 上查看所有 Google I/O 2025 的精彩更新。