🌀 PROGRESSVIEW en SWIFTUI en Español

Hoy en SwiftBeta vamos hablar del ProgressView en SwiftUI. Esta vista es muy usada para dar feedback visual al usuario de que alguna tarea está en proceso y que aún no ha terminado.
Tenemos varios estilos disponibles en SwiftUI y hoy vamos a ver dos:

• ProgressView con un estilo circular, se usa para indicar al usuario que se está realizando una tarea pero que no podemos medir cuánto falta para que finalice.
  Algunos escenarios donde podrías pasar es al mostrar una pantalla en nuestra app pero aún no hemos recibido todos los datos de nuestro servidor, imagínate que quieres mostrar un listado de productos, pero para ello tienes que hacer una petición a backend para recibirlos, si la red es muy lenta en ese momento podemos mostrar este ProgressView y cuando recibamos los datos, ocultamos el progress view y mostramos los datos recién recibidos de nuestro servidor.

• ProgressView en el que podemos ver cuánto queda para que una tarea acabe, en este caso damos más información a los usuarios. Por ejemplo, se están descargando datos para poder mostrar en la app, podría ser una foto y a medida que se va descargando mostramos cuánto queda por descargar todo el archivo.

ProgressView en código

Ahora vamos a crear los dos ProgressView en un VStack. Aparecerán cuando le demos a un botón que vamos a crear llamado Start. Y si volvemos a dar al botón el valor del ProgressView con progreso se incrementará en un porcentaje, pudiendo ver como se va completando la tarea (lo incrementaremos de 0,1 en 0,1 hasta llegar a 1, que es cuando la barra no se puede rellenar más).

También vamos a crear otro Button con título Stop para ocultar otra vez los 2 ProgressView.

struct ContentView: View {
    @State var isLoading: Bool = false
    @State private var progress = 0.1
    
    var body: some View {
        VStack {
            if isLoading {
                ProgressView(value: progress)
                    .padding(.horizontal, 30)
                    .padding(.bottom, 20)
                ProgressView()
                    .progressViewStyle(CircularProgressViewStyle(tint: .blue))
                    .scaleEffect(2)
            }
            Text("Suscríbete a SwiftBeta")
                .padding()
            HStack(spacing: 30) {
                Button("Start") {
                    isLoading = true
                    progress += 0.1
                }
                Button("Stop") {
                    isLoading = false
                }
            }
        }
    }
}

Con el anterior código, si pulsamos en el botón Start, mostraríamos por pantalla las siguientes vistas:

Y si le damos al Button Stop, volveríamos a ocultar los dos ProgressView. Hoy hemos visto cómo le podemos indicar a los users de nuestra app que tenemos una tarea que se está ejecutando e indicarles el progreso (si lo tenemos).

Hasta aquí el post de hoy, gracias por leernos! 🤓
👉👉 SUSCRÍBETE al CANAL de youtube
Si tienes preguntas no dudes en contactar con nosotros a través de Twitter