Navegação com o Compose para Wear OS

O componente de navegação no Android Jetpack oferece suporte a apps do Jetpack Compose. É possível navegar entre funções de composição e, ao mesmo tempo, aproveitar a infraestrutura e os recursos do componente de navegação.

Esta página descreve as diferenças existentes na navegação com o Jetpack Compose para Wear OS.

Configurar

Use a dependência a seguir no arquivo build.gradle do módulo do app:

Kotlin

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

Essa dependência é usada em vez do artefato androidx.navigation:navigation-compose, porque ela fornece implementações alternativas específicas para o Wear OS.

Criar um controlador, um host e um gráfico de navegação

A navegação com o Compose para Wear OS requer os mesmos três componentes necessários em apps que não são criados para esse sistema operacional: controlador, host e gráfico de navegação.

Use rememberSwipeDismissableNavController() para criar uma instância de WearNavigator, uma implementação do NavController usada nos aplicativos para Wear OS:

Kotlin

val navController = rememberSwipeDismissableNavController()

NavController é a API principal usada para navegar em aplicativos do Compose. Ela controla a navegação entre funções de composição no host de navegação, que no Wear OS é SwipeDismissableNavHost.

Kotlin

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

Assim como a função de composição NavHost, ela faz referência ao controlador de navegação, à rota para o destino inicial e ao builder do gráfico de navegação, que é um lambda final nesse exemplo.

O destino inicial precisa ser informado no builder do gráficos de navegação, junto a todos os outros destinos que precisam ser acessados pelo controlador de navegação.

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

Para saber mais sobre a navegação no Jetpack, consulte Como navegar com o Compose ou faça o codelab Navegação no Jetpack Compose.