SwipeActions y Refreshable en SwiftUI en Español
swipeActions y refreshable en SwiftUI 3.0

SwipeActions y Refreshable en SwiftUI en Español

swipeActions en SwiftUI y refreshable en SwiftUI son dos modificadores que usamos para poder lanzar acciones. swipeActions en SwiftUI lo usamos para añadir acciones en nuestras celdas. refreshable en SwiftUI lo usamos para realizar una acción en nuestra List.

SwiftBeta
Aprende SwiftUI desde cero

Hoy en SwiftBeta vamos a ver dos modificadores nuevos .swipeActions y .refeshable en SwiftUI 3.0.
En iOS 15 y Xcode 13 han añadido los swipe actions en SwiftUI, ¿esto que significa? que en las celdas de una List en SwiftUI podemos mostrar acciones si arrastramos la celda hacia la derecha o izquierda (depende como lo configuremos).

Esto nos permite poder realizar acciones rápidamente, tan solo debemos usar el modificador .swipeAction, vamos a verlo.

swiftActions en SwiftUI en Código

Para poder probar esta nueva funcionalidad, vamos a crear un proyecto de cero. Y vamos a crear una List en SwiftUI para mostrar un array de devices. Para ello, lo primero que vamos hacer es crear este modelo Device:

struct Device {
    let name: String
    let systemImage: String
}
struct Device en Swift

Y a continuación, vamos a crear un array con devices:

let arrayOfDevices = [
    Device(name: "iphone", systemImage: "iphone"),
    Device(name: "ipad", systemImage: "ipad"),
    Device(name: "pc", systemImage: "pc"),
    Device(name: "4k tv", systemImage: "4k.tv"),
    Device(name: "ipod", systemImage: "ipod"),
    Device(name: "laptop", systemImage: "laptopcomputer")
]
array de devices en Swift

Con esta información, ahora lo que haremos será mostrarla dentro de una List en SwiftUI:

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(arrayOfDevices, id: \.name) { device in
                    Label(device.name, systemImage: device.systemImage)
                }
            }
            .navigationTitle("Devices")
        }
    }
}
List en SwiftUI

Si compilamos la aplicación vemos que se muestran los devices correctamente. Ahora dentro del ForEach, vamos a usar el modificador swipeActions dentro de Label.
Al añadir el modificador podemos añadir varios Buttons. En este caso añadiremos un button con una simple acción, la de printar un mensaje por consola:

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(arrayOfDevices, id: \.name) { device in
                    Label(device.name, systemImage: device.systemImage)
                        .swipeActions {
                            Button {
                                print("Favorito")
                            } label: {
                                Label("Favorito", systemImage: "star.fill")
                            }
                        }
                }
            }
            .navigationTitle("Devices")
        }
    }
}
Modificador swipeActions en SwiftUI

Al compilar, si hacemos swipe hacia la izquierda verás que aparece un icono de una estrella y si lo pulsas se printa por consola el mensaje de "Favorito".

Si quisiéramos añadir otro button sería tan simple como añadir otro Button justo debajo del anterior:

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(arrayOfDevices, id: \.name) { device in
                    Label(device.name, systemImage: device.systemImage)
                        .swipeActions {
                            Button {
                                print("Favorito")
                            } label: {
                                Label("Favorito", systemImage: "star.fill")
                            }
                            Button {
                                print("Compartir")
                            } label: {
                                Label("Compartir", systemImage: "square.and.arrow.up")
                            }
                        }
                }
            }
            .navigationTitle("Devices")
        }
    }
}
Añadimos más acciones a nuestro modificador swipeActions

Podemos cambiar el color del Button usando el modificador .tint():

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(arrayOfDevices, id: \.name) { device in
                    Label(device.name, systemImage: device.systemImage)
                        .swipeActions(edge: .trailing) {
                            Button {
                                print("Favorito")
                            } label: {
                                Label("Favorito", systemImage: "star.fill")
                            }
                            .tint(.yellow)
                            Button {
                                print("Compartir")
                            } label: {
                                Label("Compartir", systemImage: "square.and.arrow.up")
                            }
                            .tint(.blue)
                        }
                }
            }
            .navigationTitle("Devices")
        }
    }
}
Añadimos tint a nuestros Buttons en SwiftUI

De esta manera asignamos un color a cada una de las acciones de nuestro swipeAction.

Fíjate que hemos hecho el gesto en un único sentido, si quisieras customizar la orientación del swipe, podemos hacerlo pasándole un parámetro al modificador .swipeActions

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(arrayOfDevices, id: \.name) { device in
                    Label(device.name, systemImage: device.systemImage)
                        .swipeActions(edge: .trailing) {
                            Button {
                                print("Favorito")
                            } label: {
                                Label("Favorito", systemImage: "star.fill")
                            }
                            Button {
                                print("Compartir")
                            } label: {
                                Label("Compartir", systemImage: "square.and.arrow.up")
                            }
                        }
                        .swipeActions(edge: .leading) {
                            Button {
                                print("Borrar")
                            } label: {
                                Label("Borrar", systemImage: "trash.fill")
                            }
                        }
                }
            }
            .navigationTitle("Devices")
        }
    }
}
Cambiamos la orientación del modificador swipeActions en SwiftUI

De esta manera podemos mover la celda tanto a la derecha como a la izquierda y mostraríamos alguna acción a realizar. Bastante chulo la verdad.

refreshable en SwiftUI en Código

Antes de finalizar el video me gustaría comentaros sobre todo modificador llamado refreshable que podemos usar a partir de iOS 15 y Xcode 13. Este modificador nos sirve para que lanzar alguna acción, como por ejemplo refrescar la información que aparece en nuestra List:

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                // code
            }
            .refreshable {
                print("Recargar información...")
            }
            .navigationTitle("Devices")
        }
    }
}
Modificador refreshable en SwitUI

Al añadirlo debemos especificar alguna acción a realizar dentro de su closure. En nuestro caso hemos añadido un simple print, pero esta acción podría ser una petición HTTP. Y para lanza esta acción es tan simple como tirar la List hacía abajo, y poco a poco veremos un ProgressView.


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

SwiftUI desde cero