Navigazione con Compose per Wear OS

Il componente Navigazione di Android Jetpack fornisce supporto per le applicazioni Jetpack Compose. Puoi navigare tra i componenti componibili sfruttando al contempo l'infrastruttura e le funzionalità del componente di navigazione.

In questa pagina vengono descritte le differenze con la navigazione Jetpack in Compose per Wear OS.

Configura

Utilizza la seguente dipendenza nel file build.gradle del modulo dell'app:

Kotlin

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

Viene utilizzato invece dell'elemento androidx.navigation:navigation-compose perché fornisce implementazioni alternative specifiche per Wear OS.

Crea un controller di navigazione, un host e un grafico

La navigazione con Compose per Wear OS richiede gli stessi tre componenti necessari per le app non Wear OS: il controller di navigazione, l'host e il grafico.

Utilizza rememberSwipeDismissableNavController() per creare un'istanza di WearNavigator, un'implementazione di NavController adatta per le applicazioni Wear OS:

Kotlin

val navController = rememberSwipeDismissableNavController()

NavController è l'API principale utilizzata per navigare nelle applicazioni Compose. Controlla la navigazione tra i composabili nell'host di navigazione, che su Wear OS è SwipeDismissableNavHost.

Kotlin

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

Come il composable NavHost, accetta un riferimento al controller di navigazione, al percorso per la destinazione di partenza e al builder per il grafo di navigazione, che viene mostrato qui come funzione lambda finale.

La destinazione di partenza deve essere fornita nel generatore di grafici di navigazione, insieme a tutte le altre destinazioni che devono essere navigabili con il controllore di navigazione.

Nell'app per Wear OS, dichiara SwipeDismissableNavHost come contenuto della Scaffold per supportare componenti di primo livello come ora, indicatore di scorrimento/posizione e indicatore di pagina. Utilizza un oggetto Orologiaio AppScaffold sopra SwipeDismissableNavHost e Orologiaio ScreenScaffold a livello di schermata per aggiungere un oggetto TimeText alla schermata per impostazione predefinita e assicurarti che venga animato correttamente quando navighi tra le schermate. Inoltre, ScreenScaffold aggiunge un PositionIndicator per i contenuti scorrevoli. 

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

Per scoprire di più su Jetpack Navigation, consulta Navigazione con Compose o partecipa al lab di codice di Navigazione di Jetpack Compose.