Seguridad de tipos en Kotlin DSL y Navigation Compose

Puedes usar APIs de tipo seguro integradas para proporcionar seguridad de tipo en el tiempo de compilación a tu gráfico de navegación. Estas APIs están disponibles cuando tu app usa el menú de navegación Compose o DSL de Kotlin de Navigation. Están disponibles desde el Navigation 2.8.0.

Estas APIs son equivalentes a lo que proporciona Safe Args a los gráficos de navegación se compiló mediante XML.

Cómo definir rutas

Para usar rutas de tipo seguro en Compose, primero debes definir las rutas serializables clases u objetos que representan tus rutas.

  • Object: Usa un objeto para las rutas sin argumentos.
  • Clase: Usa una clase o clase de datos para las rutas con argumentos.
  • KClass<T>: Úsalo si no necesitas pasar argumentos, como una clase. sin parámetros, o una clase en la que todos los parámetros tienen valores predeterminados
    1. Por ejemplo: Profile::class

En cualquier caso, el objeto o la clase debe poder serializarse.

Por ejemplo:

// Define a home route that doesn't take any arguments
@Serializable
object Home

// Define a profile route that takes an ID
@Serializable
data class Profile(val id: String)

Crea tu gráfico

A continuación, debes definir tu gráfico de navegación. Usa la composable(). para definir elementos componibles como destinos en tu gráfico de navegación.

NavHost(navController, startDestination = Home) {
     composable<Home> {
         HomeScreen(onNavigateToProfile = { id ->
             navController.navigate(Profile(id))
         })
     }
     composable<Profile> { backStackEntry ->
         val profile: Profile = backStackEntry.toRoute()
         ProfileScreen(profile.id)
     }
}

Observa lo siguiente en este ejemplo:

  • composable() toma un parámetro de tipo. Es decir, composable<Profile>
  • Definir el tipo de destino es un enfoque más sólido que pasar un route cadena como en composable("profile").
  • La clase de ruta define el tipo de cada argumento de navegación, como en val id: String, por lo que no es necesario usar NavArgument.
  • Para la ruta del perfil, el método de extensión toRoute() recrea la objeto Profile de NavBackStackEntry y su argumentos.

Para obtener más información sobre cómo diseñar tu gráfico en general, consulta la sección Diseño la página Gráfico de navegación.

Por último, puedes navegar al elemento componible con navigate(). pasando la instancia de la ruta:

navController.navigate(Profile(id = 123))

Esta acción lleva al usuario al destino composable<Profile> en el gráfico de navegación. Cualquier argumento de navegación, como id, se puede obtener mediante reconstruir Profile con NavBackStackEntry.toRoute y leer su propiedades.

Recursos adicionales