Muy buenas, me llamo Luis y hoy les traigo un tutorial.
Índice
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.
Añadir comentario