作者 / 開發(fā)者關(guān)系工程師 Don Turner

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

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

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

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

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

創(chuàng)立原則

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

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

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

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

關(guān)鍵功能

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

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

狀態(tài)范圍限定: 能夠?qū)顟B(tài)限定在返回堆棧中的目標位置范圍內(nèi)，同時還可通過專用 Jetpack lifecycle 庫提供可選的 ViewModel 支持。

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

基本代碼示例

為了幫助您了解 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") }
    }
  }
)

開始使用并分享反饋

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

常見導航界面，例如導航邊欄或?qū)Ш綑?/p>

條件導航，例如登錄流程

使用 Scenes 的自定義布局

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

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

Nav3 為在 Compose 應(yīng)用中構(gòu)建現(xiàn)代導航提供了靈活而強大的基礎(chǔ)。我們非常期待看到您借此打造的精彩作品。

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