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.

No app para Wear OS, declare SwipeDismissableNavHost como um conteúdo do Scaffold para oferecer suporte a componentes de alto nível, como tempo, indicador de rolagem/posição e indicador de página. Use um objeto Horologist AppScaffold acima da SwipeDismissableNavHost e o Horologist ScreenScaffold no nível da tela para adicionar um objeto TimeText à tela por padrão e garantir que ele seja animado corretamente ao navegar entre telas. Além disso, o ScreenScaffold adiciona um PositionIndicator para conteúdo rolável. 

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

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.