Navegación en Android con Jetpack Compose

En Android, la navegación entre pantallas es una parte fundamental de la experiencia del usuario. Con Jetpack Compose, puedes implementar la navegación de manera sencilla utilizando el componente de navegación. A continuación, te mostraré cómo configurar y utilizar la navegación en Android con Jetpack Compose.

Configuración de la Navegación en Jetpack Compose

Para configurar la navegación en Jetpack Compose, primero debes agregar las dependencias necesarias en tu archivo build.gradle del módulo app:

dependencies {
    implementation "androidx.navigation:navigation-compose:2.4.0"
}

Una vez que hayas agregado la dependencia, puedes configurar la navegación en tu aplicación. Para hacerlo, debes crear un NavHost que contendrá las diferentes pantallas de tu aplicación. Aquí tienes un ejemplo básico:

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("details") { DetailsScreen(navController) }
    }   
}

En este ejemplo, hemos creado un NavHost con dos destinos: "home" y "details". Cada destino está asociado a una pantalla específica, que se define como una función composable.

Navegación entre Pantallas

Para navegar entre pantallas, puedes utilizar el navController que has creado. Por ejemplo, para navegar desde la pantalla de inicio a la pantalla de detalles, puedes usar el siguiente código:

@Composable
fun HomeScreen(navController: NavController) {
    Button(onClick = { navController.navigate("details") }) {
        Text("Ir a Detalles")
    }
}

En este ejemplo, hemos creado un botón en la pantalla de inicio que, al hacer clic, navega a la pantalla de detalles utilizando el método navigate del navController.

Nota que la función HomeScreen recibe el navController como parámetro, lo que permite que la pantalla de inicio controle la navegación hacia otras pantallas.

Pasar Datos entre Pantallas

Puedes pasar datos entre pantallas utilizando argumentos en la navegación. Para hacerlo, puedes definir argumentos en tu NavHost y luego pasarlos al navegar. Aquí tienes un ejemplo:

NavHost(navController = navController, startDestination = "home") {
    composable("home") { HomeScreen(navController) }
    composable("details/{itemId}") { backStackEntry ->
        val itemId = backStackEntry.arguments?.getString("itemId")
        DetailsScreen(navController, itemId)
    }
}

En este ejemplo, hemos definido un argumento itemId en la ruta de la pantalla de detalles. Luego, al navegar a esta pantalla, puedes pasar el valor del argumento:

@Composable
fun HomeScreen(navController: NavController) {
    Button(onClick = { navController.navigate("details/123") }) {
        Text("Ir a Detalles")
    }
}

En este caso, estamos pasando el valor "123" como argumento itemId a la pantalla de detalles. En la pantalla de detalles, puedes recuperar este valor y utilizarlo según tus necesidades.

Conclusión

La navegación en Android con Jetpack Compose es fácil de implementar utilizando el componente de navegación. Puedes configurar tu NavHost para definir las diferentes pantallas de tu aplicación y utilizar el navController para navegar entre ellas. Además, puedes pasar datos entre pantallas utilizando argumentos en la navegación. Con estas herramientas, puedes crear una experiencia de usuario fluida y coherente en tu aplicación Android.