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.
Tabla de contenido
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
}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")
]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")
}
}
}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")
}
}
}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")
}
}
}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")
}
}
}
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")
}
}
}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")
}
}
}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.
