Navigazione con Compose per Wear OS


Il componente Navigation in Android Jetpack fornisce il supporto per le applicazioni Jetpack Compose. Puoi spostarti tra i composable sfruttando l'infrastruttura e le funzionalità del componente Navigation.

Questa pagina descrive le differenze con Jetpack Navigation su Compose per Wear OS.

Configurazione

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

Kotlin

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

Questo artefatto viene utilizzato al posto di androidx.navigation:navigation-compose perché fornisce implementazioni alternative specifiche per Wear OS.

Creare un controller, un host e un grafico di navigazione

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

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

val navController = rememberSwipeDismissableNavController()

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

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

Come il NavHost composable, accetta un riferimento al controller di navigazione, la route per la destinazione di inizio e il builder per il grafico di navigazione, che qui viene mostrato come lambda finale.

La destinazione di inizio deve essere fornita nel builder del grafico di navigazione, insieme a tutte le altre destinazioni che devono essere navigabili con il controller di navigazione.

Nell'app per Wear OS, dichiara SwipeDismissableNavHost come contenuto di AppScaffold per supportare i componenti di primo livello come l'ora, l'indicatore di scorrimento o posizione e l'indicatore di pagina. Utilizza un oggetto AppScaffold sopra SwipeDismissableNavHost e ScreenScaffold a livello di schermo per aggiungere un oggetto TimeText allo schermo per impostazione predefinita e assicurarti che venga animato correttamente durante la navigazione tra gli schermi. 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")!!)
            }
        }
    }
}

// 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
        // ...

Per saperne di più su Jetpack Navigation, consulta Navigare con Compose o segui il codelab Jetpack Compose Navigation.