Navegar con argumentos en Jetpack Compose | por Daniel Atitienei

Hay dos formas de navegar con argumentos y explicaré ambas.

1. pasar argumentos directo a la pantalla
2. recogerla Manejador de estado guardado fuera de Ver modelo

Primero necesitamos agregar marcadores de posición de argumento a la ruta.Navega con argumentos (solo puedes pasar tipos de cadena)@Composablefun Navigation() {val navController = RememberNavController()NavHost(navController = navController,startDestination = «home») {composable(«car/{carId}») { navBackStackEntry ->/* Extrae el ID de la ruta */val carId = navBackStackEntry.arguments?.getString(«carId»)/* Comprobamos si es nulo */carId?.let {CarScreen(carId = it.toInt())}}/* … */}}@ Composablefun Pantalla de inicio(navController: NavController) {Button(onClick = {/* Reemplace {carId} con 1 */navController.navigate(«car/{carId}».replace(oldValue = «{carId}»,newValue = «$ {1 }»))}) {Text(text = «Navegar al coche con ID 1»)}}

Navegar con argumentos opcionales

Para especificar el tipo de argumento, necesitamos agregar argumentos opcionales

• Deben incluirse utilizando la sintaxis de parámetros de consulta («?argName={argName}»).
• Deben tener un valor predeterminado establecido o tener nullability = true (lo que implícitamente establece el valor predeterminado en nulo).

composable(route = «car?carId={carId}»,arguments = listOf(navArgument(«carId») {defaultValue = 0type = NavType.IntType})) { navBackStackEntry ->/* Extrae el ID de la ruta */val carId = navBackStackEntry.arguments?.getInt(«carId»)/* Verificamos si es nulo */carId?.let {CarScreen(carId = it)}}Y si desea agregar más argumentos, agregue & entre argumentos, «?argName1={argName1}&argName2={argName2}» En mi opinión, esta es la mejor manera de navegar con argumentos porque si queremos hacer, por ejemplo, una llamada API (por ejemplo, el automóvil con una ID específica de la base de datos ). Eso es lo que queremos en Ver modelo porque el es el responsable para el tratamiento y gestión de los datos.clase CarViewModel(savedStateHandle: SavedStateHandle) : ViewModel() {var carId = mutableStateOf(0)init {savedStateHandle.get(«carId»)?.let {carId.value = it}}}

Configuración

Usamos un Moshi que facilita el análisis de JSON en las clases de Java y Kotlin. Agreguemos la dependencia a .app/build.gradledependencies {implementation(«com.squareup.moshi:moshi-kotlin:1.14.0»)}

Crear el JSON

@Composablefun HomeScreen(navController: NavController) {Button(onClick = {/* Replace {car} with carJson */val car = Car(id = «1»title = «Porche Panamera»)val moshi = Moshi.Builder() . addLast(KotlinJsonAdapterFactory()).build()val jsonAdapter: JsonAdapter = moshi.adaptador()val carJson: String = jsonAdapter.toJson(car)navController.navigate(«car/{car}».replace (oldValue = «{car}»,newValue = carJson))}) {Text(text = «Navegar a carros»)}}

Ahora tenemos los 2 métodos de paso mencionados anteriormente

1. Pasar argumentos directamente a la pantalla

@Composablefun Navigation() {val navController = RememberNavController()NavHost(navController = navController,startDestination = «home») {composable(«car/{car}») { navBackStackEntry ->/* Extrae el JSON automático de la ruta * / val carJson = navBackStackEntry.arguments?.getString(«car»)/* Comprobamos si es nulo */carJson?.let {val moshi = Moshi.Builder().addLast(KotlinJsonAdapterFactory()).build() val jsonAdapter : Adaptador Json = moshi.adaptador()val car = jsonAdapter.fromJson(car)CarScreen(car = car)}}/* … */}}2. Consígalos de SavedStateHandle de ViewModelclase CarViewModel(savedStateHandle: SavedStateHandle) : ViewModel() {val moshi = Moshi.Builder().addLast(KotlinJsonAdapterFactory()).build()val jsonAdapter: JsonAdapter = moshi.adaptador()var coche = mutableStateOf(Car())init {savedStateHandle.get(«car»)?.let {car.value = jsonAdapter.fromJson(car)}}}Una buena forma de usar dependencias en ViewModel es la inyección de dependencias con Hilt , Koin, etc. Espero que encuentre este artículo que le proporcione una comprensión básica cómo navegar con argumentos en Jetpack Compose. Recuerde, una vez que conozca los conceptos básicos, estará más dispuesto a expandir su uso.