Navegación con Compose para Wear OS

Versión de Material de Compose para Wear OS 2.5 3

---

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.

Nota: Si no estás familiarizado con el componente de Navigation, consulta los recursos de Cómo navegar con Compose antes de continuar.

Configuración

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

Kotlin

dependencies {
    def wear_compose_version = "1.5.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 contenido de AppScaffold para admitir componentes de nivel superior, como la hora, el indicador de desplazamiento o posición y el indicador de página. Usa un objeto AppScaffold sobre SwipeDismissableNavHost y 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 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")!!)
            }
        }
    }
}

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