Animaciones de transición de pantalla con navegación jetpack | de Alejandro Zürcher | julio 2023
El objetivo principal es responder al clic en el cartel de la película y navegar a una vista detallada de la película. En este caso, la vista detallada consiste únicamente en una versión ampliada del póster. Al profundizar en el código, aparece nuestra pantalla principal Pantalla de lista de películas y se abre la pantalla de detalles Pantalla de detalles de la película. Lo que necesitamos es pasar la película seleccionada en la que se hizo clic a la pantalla de detalles para que podamos ver el póster correspondiente. Para hacer esto, podemos usar la biblioteca de navegación con Jetpack Compose: implementación ‘androidx.navigation:navigation-compose:2.7.0-beta02’*Examinaré la justificación de por qué estoy usando esos beta02 Más tarde, podemos usar esta biblioteca de AndroidX para definir con precisión la navegación de nuestra aplicación (si está familiarizado con el componente de navegación y el diagrama de navegación. Es básicamente lo mismo (https://developer.android.com/guide/navigation/get-started)). Hice esto creando un nuevo RootComposable que contiene la definición de nuestro gráfico:
En el destino MovieDetail, agregué lógica que admite pasar un argumento de la pantalla de lista. Esta será la ID de la película en la que se hizo clic para que MovieDetailsScreen pueda obtener la ruta correcta del póster.
Esta es una parte importante de la implementación, ya que estamos pasando al oyente que debe responder al clic del cartel. En su implementación, llama al navController y navega a la ruta requerida, pasando como argumento el ID de la película:onMovieDetails = { navController.navigate(«$MOVIE_DETAIL/$it») }, y nuestra MainActivity se usa al llamar a setContent: Primero llamamos a RememberNavController, que agrega un nuevo navegador a nuestra aplicación y lo guarda en nuestra composición.val navController = RememberNavController()Después de eso, necesitamos definir nuestro gráfico usando un NavHost. Toma como parámetros nuestro navController y el primer destino que debe usar por defecto: NavHost(navController = navController, startDestination = MOVIE_LIST) { En él necesitamos definir nuestras pantallas usando NavGraphBuilder.componible() Función. Inside It nos permite llamar a nuestros componibles para que se muestren en cada destino: diversión pública NavGraphBuilder.composable (Y con todo esto en su lugar, la aplicación ahora navega con éxito desde la lista a la vista de detalles.
