El componente Navigation de Android Jetpack proporciona compatibilidad con aplicaciones de Jetpack Compose. Puedes navegar entre elementos componibles 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.2.0"
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 componibles 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.