Navigation mit Compose für Wear OS


Die Navigationskomponente in Android Jetpack bietet Unterstützung für Jetpack Compose-Anwendungen. Sie können zwischen zusammensetzbaren Funktionen navigieren und dabei die Infrastruktur und Funktionen der Navigationskomponente nutzen.

Auf dieser Seite werden die Unterschiede zu Jetpack Navigation in Compose for Wear OS beschrieben.

Einrichtung

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

Kotlin

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

Diese wird anstelle des Artefakts androidx.navigation:navigation-compose verwendet, da sie alternative Implementierungen speziell für Wear OS bietet.

Navigationscontroller, Host und Diagramm erstellen

Für die Navigation mit Compose for Wear OS sind dieselben drei Komponenten erforderlich wie für Nicht-Wear OS-Apps: der Navigationscontroller, der Host und das Diagramm.

Verwenden Sie rememberSwipeDismissableNavController() , um eine Instanz von WearNavigator zu erstellen, einer Implementierung von NavController , die für Wear OS-Anwendungen geeignet ist:

val navController = rememberSwipeDismissableNavController()

Die NavController ist die primäre API, die für die Navigation in Compose-Anwendungen verwendet wird. Sie steuert die Navigation zwischen zusammensetzbaren Funktionen im Navigationshost, der in Wear OS SwipeDismissableNavHost ist.

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

Wie die NavHost zusammensetzbare Funktion, verwendet sie einen Verweis auf den Navigationscontroller, die Route für das Start ziel und den Builder für das Navigationsdiagramm, der hier als nachgestellte Lambda-Funktion dargestellt ist.

Das Startziel muss im Builder für das Navigationsdiagramm angegeben werden, zusammen mit allen anderen Zielen, die mit dem Navigationscontroller navigierbar sein sollen.

Deklarieren Sie in Ihrer Wear OS-App SwipeDismissableNavHost als Inhalt von AppScaffold, um Komponenten der obersten Ebene wie Zeit, Scroll- oder Positionsanzeige und Seitenanzeige zu unterstützen. Verwenden Sie ein AppScaffold-Objekt über SwipeDismissableNavHost und ScreenScaffold auf Bildschirmebene, um dem Bildschirm standardmäßig ein TimeText-Objekt hinzuzufügen und dafür zu sorgen, dass die Animation beim Wechseln zwischen Bildschirmen korrekt ausgeführt wird. Außerdem fügt ScreenScaffold eine PositionIndicator für scrollbare Inhalte hinzu.
    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
    ) { scaffoldPaddingValues ->
        // Screen content goes here
        // ...

Weitere Informationen zu Jetpack Navigation finden Sie unter Mit Compose navigieren oder im Codelab zu Jetpack Compose Navigation.