使用 Compose for Wear OS 的導覽功能

Android Jetpack 中的 Navigation 元件支援 Jetpack Compose 應用程式。您可以在不同可組合項之間進行導覽，同時也可運用 Navigation 元件的基礎架構和功能。

本頁面說明 Compose for Wear OS 上的 Jetpack Navigation 差異。

設定

在應用程式模組的 build.gradle 檔案中，使用以下依附元件：

Kotlin

dependencies {
    def wear_compose_version = "1.4.0"
    implementation "androidx.wear.compose:compose-navigation:$wear_compose_version"
}

系統會改用這個構件取代 androidx.navigation:navigation-compose 構件，因為前者提供 Wear OS 專屬的替代實作項目。

建立導覽控制器、主機和圖表

以 Compose for Wear OS 進行導覽時，必須使用非 Wear OS 應用程式同樣需要的三個元件：導覽控制器、導覽主機和導覽圖。

使用 rememberSwipeDismissableNavController() 建立 WearNavigator 的例項，這是適用於 Wear OS 應用程式的 NavController 實作：

Kotlin

val navController = rememberSwipeDismissableNavController()

NavController 是 Compose 應用程式中用來導覽的主要 API，可控制導覽主機中可組合項之間的導覽，在 Wear OS 為 SwipeDismissableNavHost。

Kotlin

val navController = rememberSwipeDismissableNavController()
SwipeDismissableNavHost(
    navController = navController,
    startDestination = "message_list"
) {
    // TODO: build navigation graph
}

與 NavHost 可組合項類似，用於參照導覽控制器、起始目的地的路徑，以及導覽圖建構工具 (做為結尾 lambda 在此顯示)。

起始目的地必須在導覽圖建構工具中提供，並搭配所有其他目的地。這些目的地應可透過導覽控制器進行瀏覽。

在 Wear OS 應用程式中，將 SwipeDismissableNavHost 宣告為 Scaffold 的內容，以支援時間、捲動/位置指標和頁面指標等頂層元件。在 SwipeDismissableNavHost 和畫面層級的 Horologist ScreenScaffold 上方使用 Horologist AppScaffold 物件，即可在畫面中預設加入 TimeText 物件，並確保在瀏覽不同畫面時能正確播放動畫。此外，ScreenScaffold 會為可捲動內容新增 PositionIndicator。

AppScaffold {
    val navController = rememberSwipeDismissableNavController()
    SwipeDismissableNavHost(
        navController = navController,
        startDestination = "message_list"
    ) {
        composable("message_list") {
            MessageList(onMessageClick = { id ->
                navController.navigate("message_detail/$id")
            })
        }
        composable("message_detail/{id}") {
            MessageDetail(id = it.arguments?.getString("id")!!)
        }
    }
}
// ...
// .. Screen level content goes here
val scrollState = rememberScrollState()

ScreenScaffold(scrollState = scrollState) {
    // Screen content goes here
Navigation.kt

如要進一步瞭解 Jetpack Navigation，請參閱「使用 Compose 進行導覽」，或前往 Jetpack Compose Navigation 程式碼研究室。