使用 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.1"
    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 宣告為 AppScaffold 的內容，以支援頂層元件，例如時間、捲動/位置指標和頁面指標。在畫面層級的 SwipeDismissableNavHost 和 ScreenScaffold 上方使用 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")!!)
            }
        }
    }
}

// Implementation of one of the screens in the navigation
@Composable
fun MessageDetail(id: String) {
    // .. Screen level content goes here
    val scrollState = rememberTransformingLazyColumnState()

    val padding = rememberResponsiveColumnPadding(
        first = ColumnItemType.BodyText
    )

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

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