Navegación con Compose para Wear OS

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.4.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.

En tu app para Wear OS, declara SwipeDismissableNavHost como un contenido de Scaffold para admitir componentes de nivel superior, como el tiempo, el indicador de desplazamiento o posición y el indicador de página. Usa un objeto Horologist AppScaffold sobre SwipeDismissableNavHost y Horologist ScreenScaffold a nivel de la pantalla para agregar un objeto TimeText a la pantalla de forma predeterminada y asegurarte de que se anime correctamente cuando navegues entre pantallas. Además, ScreenScaffold agrega un elemento PositionIndicator para el contenido desplazable. 

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 obtener más información sobre Jetpack Navigation, consulta Cómo navegar con Compose o realiza el codelab sobre Navigation en Jetpack Compose.