Pasar datos entre pantallas

Clase 20 de 36Curso de Desarrollo de Aplicaciones iOS con SwiftUI

Resumen

¿Cómo transferir datos entre pantallas en una aplicación de videojuegos?

En el desarrollo de aplicaciones, especialmente cuando hablamos de videojuegos, es crucial saber cómo compartir datos entre diferentes pantallas o vistas. La lógica detrás de la transferencia de datos garantiza que las experiencias del usuario sean coherentes y fluidas. En esta sección, exploraremos cómo se realiza esta tarea, partiendo de un archivo de juegos hasta llegar a una pantalla de reproducción de video.

¿Cómo activamos la vista del juego?

Para que al pulsar un botón se redirija a la siguiente pantalla de la aplicación, utilizamos una variable con el property wrapper @State de SwiftUI. Esta variable, llamada gameViewIsActive, indica cuando la pantalla del juego está activa:

@State private var gameViewIsActive: Bool = false

Cuando la variable se establece en true, la aplicación entiende que debe mostrar la pantalla del juego correspondiente.

¿Cómo creamos el Navigation Link?

Un NavigationLink es fundamental para navegar entre vistas en SwiftUI. Para establecer un NavigationLink que conecte dos pantallas, como Games y GameView, sigue estos pasos:

  1. Define el destino, que es la GameView.
  2. Verifica si el link está activo utilizando la variable gameViewIsActive.
  3. Añade un label para el NavigationLink, que en este caso podría ser una vista vacía o un texto temporal.

Aquí tienes un ejemplo de cómo se configura:

NavigationLink(
    destination: GameView(), 
    isActive: $gameViewIsActive,
    label: {
        Text("Ir a vista de juego")
    })

¿Cómo definimos el destino en una nueva vista?

Crearemos una nueva vista suficientemente flexible para recibir y mostrar diversos datos relacionados con los videojuegos. Esta vista, denominada GameView, debe prepararse para manejar todos los datos pertinentes:

  1. Crea una nueva vista GameView: Dentro de la carpeta de vistas, selecciona "New file", elige "SwiftUI view" y nómbrala adecuadamente.
  2. Declara las variables: Estas incluirán el título del juego, una URL para el video, el estudio desarrollador, el año de publicación, la descripción, etiquetas y enlaces a imágenes.

A continuación, te muestro cómo puede verse la declaración de variables en GameView:

struct GameView: View {
    var titulo: String
    var url: String
    var estudio: String
    var anoPublicacion: String
    var descripcion: String
    var tags: [String]
    var imagenesURL: [String]
    
    var body: some View {
        Text("Detalles del juego")
        // Aquí se añadirán componentes visuales para mostrar la información del juego
    }
}

¿Cómo integramos toda la información en GameView?

Una vez creada la estructura básica, es esencial pasarle la información desde la pantalla Games. Esto es posible mediante la creación de una instancia de GameView, a la cual se le asignan los valores correctos:

GameView(
    titulo: "Spiderman",
    url: "urlDelVideo.com",
    estudio: "Marvel",
    anoPublicacion: "2022",
    descripcion: "Un emocionante juego de superhéroes",
    tags: ["Aventura", "Acción"],
    imagenesURL: ["imagen1.url", "imagen2.url"]
)

Cuando compilas esto, asegúrate de verificar que todos los argumentos estén bien escritos y de que el NavigationLink tenga definido correctamente el destino. La omisión de estos detalles puede causar errores.

Este enfoque te brinda la capacidad de transferir y gestionar datos efectivamente en tu aplicación, mejorando la experiencia del usuario y la consistencia entre las pantallas de la misma.