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.1"
    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 AppScaffold para oferecer suporte a componentes de nível superior, como tempo, indicador de rolagem/posição e indicador de página. Use um objeto AppScaffold acima do SwipeDismissableNavHost e do 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")!!)
            }
        }
    }
}

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