Navigation mit Compose für Wear OS

Die Navigationskomponente von Android Jetpack bietet Unterstützung für Jetpack Compose-Anwendungen. Sie können zwischen den zusammensetzbaren Funktionen während Sie gleichzeitig die Infrastruktur und Funktionen.

Auf dieser Seite werden die Unterschiede zur Jetpack-Navigation in Compose für Wear beschrieben. Betriebssystem

Einrichten

Verwenden Sie die folgende Abhängigkeit in der build.gradle-Datei Ihres App-Moduls:

Kotlin

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

Wird anstelle von androidx.navigation:navigation-compose verwendet da es alternative, speziell für Wear OS entwickelte Implementierungen bietet.

Navigations-Controller, Host und Grafik erstellen

Für die Navigation mit Compose für Wear OS sind dieselben drei Komponenten Nicht-Wear OS-Apps: Navigations-Controller, Host und Grafik

Verwenden Sie rememberSwipeDismissableNavController() zum Erstellen einer Instanz von WearNavigator, einer Implementierung von NavController geeignet für Wear OS-Apps:

Kotlin

val navController = rememberSwipeDismissableNavController()

Der NavController ist die primäre API, die zur Navigation in Compose-Anwendungen verwendet wird. Es steuert die Navigation zwischen zusammensetzbaren Funktionen im Navigationshost, der unter Wear OS SwipeDismissableNavHost

Kotlin

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

Zum Beispiel NavHost zusammensetzbar, verweist er auf den Navigations-Controller, die Route für den Start Ziel und den Builder für das Navigationsdiagramm, das hier als hinteren Lambda.

Das Startziel muss im Tool zur Erstellung von Navigationsgrafiken angegeben werden, zusammen mit mit allen anderen Zielen, die mit der Navigation zu erreichen sind, Controller.

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

Weitere Informationen zu Jetpack Navigation finden Sie unter Navigation mit der Funktion „Schreiben“ oder Code-Lab „Jetpack Compose Navigation“