Cómo navegar con Compose para Wear OS

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

El componente Navigation de Android Jetpack proporciona compatibilidad para aplicaciones de Jetpack Compose. Puedes navegar entre los elementos que admiten composición y aprovechar la infraestructura y las funciones del componente Navigation.

En esta página, se describen las diferencias con la navegación de Jetpack en Compose para Wear OS.

Configuración

Usa la siguiente dependencia en el archivo build.gradle del módulo de tu app:

Kotlin


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

Se usa en lugar del artefacto androidx.navigation:navigation-compose porque proporciona implementaciones alternativas específicas de Wear OS.

Crea un controlador de navegación, un host y un gráfico

La navegación con Compose para Wear OS requiere los mismos tres componentes necesarios en apps para Wear OS: el controlador de navegación, el host y el gráfico.

Usa rememberSwipeDismissableNavController() a fin de crear una instancia de WearNavigator, una implementación de NavController adecuada para aplicaciones de Wear OS:

Kotlin


val navController = rememberSwipeDismissableNavController()

NavController es la API principal que se usa para navegar en las aplicaciones de Compose. Controla la navegación entre elementos que admiten composición en el host de navegación, que en Wear OS es SwipeDismissableNavHost.

Kotlin

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

Al igual que el elemento componible NavHost, toma una referencia al controlador de navegación, la ruta para el destino de inicio y el compilador del gráfico de navegación que se muestra aquí como una expresión lambda final.

El destino de inicio debe proporcionarse en el compilador del gráfico de navegación, junto con todos los demás destinos que se deben poder navegar con el controlador de navegación.

Kotlin

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")!!)
    }
}

Para obtener más información sobre Jetpack Navigation, consulta Cómo navegar con Compose o realiza el codelab sobre Navigation en Jetpack Compose.