Navigation avec Compose pour Wear OS

Le composant Navigation d'Android Jetpack est compatible avec les applications Jetpack Compose. Vous pouvez naviguer entre les composables tout en tirant parti de l'infrastructure et des fonctionnalités du composant Navigation.

Cette page décrit les différences par rapport au composant Navigation de Jetpack sur Compose pour Wear OS.

Configuration

Utilisez la dépendance suivante dans le fichier build.gradle de votre module d'application :

Kotlin

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

Ce code est utilisé à la place de l'artefact androidx.navigation:navigation-compose, car il fournit d'autres implémentations spécifiques à Wear OS.

Créer un contrôleur de navigation, un hôte et un graphique

Pour naviguer avec Compose pour Wear OS, vous avez besoin des trois mêmes composants que ceux qui sont requis pour les applications non Wear OS, à savoir le contrôleur de navigation, l'hôte et le graphique.

Utilisez rememberSwipeDismissableNavController() pour créer une instance de WearNavigator, une implémentation de NavController adaptée aux applications Wear OS :

Kotlin

val navController = rememberSwipeDismissableNavController()

NavController est l'API principale utilisée pour naviguer dans les applications Compose. Elle contrôle la navigation entre les composables dans l'hôte de navigation, qui est SwipeDismissableNavHost sur Wear OS.

Kotlin

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

Comme le composable NavHost, elle utilise une référence au contrôleur de navigation, la route de la destination de départ et le compilateur du graphique de navigation indiqué ici sous la forme d'un lambda de fin.

La destination de départ doit être fournie dans le compilateur du graphique de navigation, avec toutes les autres destinations qu'il doit être possible de parcourir avec le contrôleur de navigation.

Dans votre application Wear OS, déclarez SwipeDismissableNavHost comme contenu de Scaffold pour prendre en charge les composants de premier niveau tels que l'heure, l'indicateur de défilement/position et l'indicateur de page. Utilisez un objet AppScaffold Horologist au-dessus de SwipeDismissableNavHost et de ScreenScaffold Horologist au niveau de l'écran pour ajouter un objet TimeText à l'écran par défaut et vous assurer qu'il s'anime correctement lors de la navigation entre les écrans. De plus, ScreenScaffold ajoute un PositionIndicator pour le contenu à faire défiler. 

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

Pour en savoir plus sur le composant Navigation de Jetpack, consultez Naviguer avec Compose ou accédez à l'atelier de programmation Navigation de Jetpack Compose.