Programación en Swift y SwiftUI para iOS Developers

Como añadir botones de Swipe Action a la fila de una Lista

SwiftUI, a partir de iOS 15, ofrece un modifier llamado swipeActions que permite a los desarrolladores crear acciones de deslizamiento (swipe actions). swipeActions en SwiftUI lo usamos para añadir acciones en nuestras celdas. 

Con este modifier, puedes agregar botones personalizados a tu lista. Antes de ver cómo utilizar el modifier, veremos los parámetros que se pueden pasar:

edge: Puede ser de dos tipos, .leading o .trailing, siendo este último el valor por defecto. Este parámetro determina la posición de tu swipe action, es decir, si el swipe action se realiza de izquierda a derecha o de derecha a izquierda. El modifier swipeActions permite especificar si las acciones de deslizamiento deben mostrarse en el borde inicial o final.

allowsFullSwipe: Es un booleano que indica si, al realizar un full swipe, se ejecuta automáticamente la primera acción. El valor por defecto es true.

content: El contenido con tus botones.

Vamos a ver como funciona swipeActions con un ejemplo. Creamos una lista con List y ForEach

struct ContentView: View {
    
    let fruits = ["Pineapple", "Banana", "Mango", "Orange", "Strawberry"]
    
    var body: some View {
        List {
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit)
            }
            
            
        }
    }
}

Lo siguiente que hacemos es añadir el modifier swipeActions de la siguiente manera:

struct ContentView: View {
    
    let fruits = ["Pineapple", "Banana", "Mango", "Orange", "Strawberry"]
    
    var body: some View {
        List {
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit)
                    .swipeActions(edge: .leading, allowsFullSwipe: false) {
                        Button {
                        } label: {
                        Image(systemName: "heart")
                                .tint(.red)
                        }
                        Button {
                        } label: {
                        Image(systemName: "square.and.arrow.up")
                                .tint(.green)
                        }
                        
                    }
            }
            
            
        }
    }
}

De manera que si hacemos swipe o deslizamos hacia la derecha en cualquiera de las filas de la lista se muestran los botones de acción como podemos ver en la siguiente imagen:

SwiftUI facilita enormemente la incorporación de acciones de deslizamiento a una lista, lo que mejora la interactividad y la experiencia de usuario de tu aplicación. Con solo unas pocas líneas de código, podemos introducir gestos de deslizamiento iniciales y finales para acciones como marcar un elemento como completado, eliminarlo o editarlo.

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Article

Como testear y probar tu app en modo oscuro en Xcode

Next Article

Como mostrar un Context Menu en SwiftUI

Related Posts