使用 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 在此顯示)。

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

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")!!)
    }
}

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