Cómo hacer un temporizador de cuenta regresiva simple con SwiftUI

Muy buenas, me llamo Luis y hoy les traigo un tutorial.

Instrucciones paso a paso sobre cómo construir usando el marco SwiftUI

Apple lanzó un nuevo marco llamado SwiftUI que nos permite crear una interfaz de aplicaciones de una manera nueva y 100% rápida.

Realicé algunos experimentos con él y en esta pieza, te mostraré cómo hacer un temporizador de cuenta regresiva.

Pre requisitos

Para comenzar con SwiftUI, visite https://developer.apple.com/download/ y descargue la última compilación de Xcode 11 y macOS Catalina 10.15. SwiftUI también funciona con Xcode en Mojave, pero la vista previa no funcionará.

Además, es importante tener en cuenta que el marco SwiftUI solo está disponible en iOS 13, macOS 10.15, watchOS 6 y iPadOS 13.

Creando un proyecto SwiftUI

Cree un nuevo proyecto de iOS con Xcode 11 y asegúrese de marcar la casilla SwiftUI:

Ahora que creó el proyecto, eche un vistazo al archivo ContentView.swift y la implementación de la variable body, aquí es donde implementará la vista en SwiftUI. Debe tener un aspecto como este:

var body: some View {    
    Text("Hello World")
}

Haciendo la lógica del temporizador

Para poder actualizar nuestra interfaz cada segundo, usaremos un temporizador y declararemos una fecha para crear nuestra cuenta atrás.

Tenga en cuenta aquí que @State recrea nuestra interfaz cada vez que se actualiza la fecha y muestra exactamente lo que vamos a hacer dentro del bloque que ocurrirá cuando se active el temporizador.

Agregar lógica de cuenta regresiva dentro de la etiqueta

Con nuestro temporizador disparando cada segundo, ahora podemos actualizar la interfaz en función de la fecha actual. Creemos una función que devuelva una cadena de cuenta atrás:

Y luego llame a la función en lugar del texto 'hola mundo':

var body: some View {
    Text(countDownString(from: referenceDate, until: date))
}

Pero espera, ¿por qué no se actualiza? Esto se debe a que el tiempo es lento, por lo que hasta que se llama, el temporizador no existe y no se puede activar.

Encender el temporizador

Una forma de inicializar el temporizador es agregar un cierre onAppear al elemento Text, de modo que cuando aparezca el texto, se creará el temporizador y el ciclo puede comenzar:

No sé si es la mejor manera de hacer esto, pero está funcionando bien. Es posible que desee invalidar el temporizador cuando la vista desaparezca para evitar pérdidas de memoria.

El código completo

import SwiftUI

struct CountDownView : View {
    
    @State var nowDate: Date = Date()
    let referenceDate: Date
    var timer: Timer {
        Timer.scheduledTimer(withTimeInterval: 1, repeats: true) {_ in 
            self.nowDate = Date()
        }
    }    
    var body: some View {
        Text(countDownString(from: referenceDate))
            .font(.largeTitle)
            .onAppear(perform: {
                _ = self.timer
            })
    }
    func countDownString(from date: Date) -> String {
        let calendar = Calendar(identifier: .gregorian)
        let components = calendar
            .dateComponents([.day, .hour, .minute, .second],
                            from: nowDate,
                            to: referenceDate)
        return String(format: "%02dd:%02dh:%02dm:%02ds",
                      components.day ?? 00,
                      components.hour ?? 00,
                      components.minute ?? 00,
                      components.second ?? 00)
    }
}

Gracias por leer este tutorial.