Navegando con Jetpack Compose (Jetpack compose con mvvm parte B) | Autor: yadunath narayanan | Julio de 2021

Así que cree un paquete de información detallada por separado bajo el paquete ui y cree un archivo MovieDetails.kt.

Cree una función componible para el texto de detalle, que contendrá dos textos en una columna.

@Composable
fun MovieDetailsText(movieItem: MovieItem)
Column(modifier = Modifier.padding(10.dp)) 
movieItem.title?.let 
Text(text = it, fontFamily = FontFamily.Serif,
fontWeight = FontWeight.Normal,
fontSize = 24.sp)

Text(text = movieItem.overview,Modifier.padding(top=10.dp),fontFamily = FontFamily.Serif,
fontWeight = FontWeight.Normal,
fontSize = 16.sp)

nordesteXEs la función combinable de imágenes de banner.

Como sigue

@Composable
fun MovieDetailsBanner(movieItem: MovieItem)
Row(modifier = Modifier
.fillMaxWidth()
.height(300.dp)) 
Image(modifier = Modifier
.fillMaxWidth()
.fillMaxHeight(),painter = rememberCoilPainter(request = Constants.BASE_IMAGE_URL+movieItem.backdrop_path) , contentDescription = "")

Ahora que tenemos funciones componibles para banners y detalles, el siguiente paso es escribir una función componible para colocar estas dos funciones.Puede haber una columna alineada verticalmente

@Composable
fun MovieDetails(movieItem: MovieItem)
Column() 
MovieDetailsBanner(movieItem = movieItem)
MovieDetailsText(movieItem = movieItem)

La IU detallada está lista y ahora puede comunicarse con la lista y las páginas de detalles y pasar datos entre estas dos páginas. Para ello podemos utilizar componentes de navegación.

Agregue la biblioteca de redacción de navegación a build.gradle

implementation 'androidx.navigation:navigation-compose:2.4.0-alpha03'

Agregue NavController y onItemClicked (definidos en el modelo de vista, verifique la parte del código) a la función componible MainList.

NavController Es la API principal del componente de navegación.Tiene estado y realiza un seguimiento de las pilas de back-end componibles que componen las pantallas de la aplicación y el estado de cada pantalla.

@Composable
fun MainList(navController: NavController,
mainViewModel: MainViewModel)
MovieList(navController = navController,movieList = mainViewModel.trendingMovies,
onItemClicked = mainViewModel::itemClicked)

Pase ambos al niño que necesita hacer clic

@Composable
fun ListViewItem(
navController: NavController,
movieItem: MovieItem,
onItemClicked: (item: MovieItem) -> Unit
) 
ListViewItem(movieItem = movieItem, modifier = Modifier
.padding(8.dp)
.clickable 
onItemClicked(movieItem)
navController.navigate("movieDetails")
)

Clickable es parte de Modifier. Entonces, a través del código de clic del proyecto anterior, configuramos el proyecto de película en viewmodel y llamamos navController.navigate («movieDetails»).

Lo último que debe hacer ahora es manejar los detalles de la película de navegación en MainActivity.

Crea un para esto Recuerde NavController y NavHost.

NavHost es responsable de definir el destino inicial y manejar las apis de navegación. Así que hemos definido dos funciones combinadas con direcciones de enrutamiento, por lo que navhost puede manejarlo cuando se llama a la navegación. NavHost necesitar NavController Creado previamente por rememberNavController() Y la ruta al destino inicial de la carta.

El código de muestra se agrega a continuación.

setContent {
val navController = rememberNavController()
MVVMJetPackComposeSampleTheme 
NavHost(navController = navController, startDestination = "trendingMovieList") 
composable("trendingMovieList") 
Surface(color = MaterialTheme.colors.background) 
MainList(navController = navController, mainViewModel = mainViewModel)


composable("movieDetails") 
MovieDetails(mainViewModel.clickedItem)

El código fuente completo se puede encontrar en github.

Feliz lectura … feliz codificación …

referencia

https://developer.android.com/jetpack/compose/navigation

https://developer.android.com/guide/navigation