Cómo agregar Swipe Actions a una lista en SwiftUI

Marcelo Laprea

22 noviembre, 20233min de lectura

Para añadir Swipe Actions a tu lista en SwiftUI, puedes utilizar dos modificadores:

• onDelete()
• swipeActions(edge:allowsFullSwipe:content:)

Usando el modificador onDelete

Primero, crearemos una lista en nuestro ContentView y una variable llamada names.

struct ContentView: View {
    @State private var names = ["Ted", "Barney", "Lily", "Robin", "Marshal"]

    var body: some View {
        List {
            ForEach(names, id: \.self) { name in
                Text(name)
            }
        }
    }
}

Este código nos muestra un listado de nombres. Ahora crearemos una función para eliminar nombres de nuestro arreglo, tomando un IndexSet como parámetro, que es lo que nos proporciona el completion action dentro del modificador onDelete():

func deleteName(at offsets: IndexSet) {
    names.remove(atOffsets: offsets)
}

Luego, añadiremos el modificador onDelete() justo después del ForEach, de la siguiente manera:

ForEach(names, id: \.self) { name in
    Text(name)
}
.onDelete(perform: deleteName)

Una vez añadido el modificador, si ejecutamos nuestra aplicación, podremos realizar un swipe action para eliminar un nombre.

Usando el modificador swipeActions

Con este modificador, puedes agregar botones personalizados a tu lista. Antes de ver cómo utilizar el modificador, examinemos 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.

Ejemplo usando .leading

Ejemplo usando .trailing

• 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.

Veamos cómo usar este modificador en nuestro ejemplo anterior:

Primero, eliminaremos el modificador .onDelete(perform: deleteName) de nuestro ForEach.

Luego, agregaremos el nuevo modificador swipeActions de la siguiente forma:

ForEach(names, id: \.self) { name in
    Text(name)
        .swipeActions(edge: .trailing, allowsFullSwipe: false) {
            Button(role: .destructive) {
                // Llamar función para eliminar nombre
                // Es el equivalente a usar el modificador .onDelete
            } label: {
                Label("delete", systemImage: "trash.fill")
            }
        }
}

Como puedes ver, estamos creando un botón con un rol .destructive, lo que indica que el botón será el típico botón para eliminar elementos de una lista, con su característico color rojo. Esta vez, puedes personalizar el contenido del botón, como lo hicimos al usar el modificador onDelete, y en nuestro caso, creamos un botón con un Label con el texto "delete" y el SF symbol "trash.fill".

De la misma manera que creamos el botón anterior, puedes agregar más botones:

.swipeActions(edge: .trailing, allowsFullSwipe: false) {
    Button(role: .destructive) {
        print("Delete name")
    } label: {
        Label("delete", systemImage: "trash.fill")
    }
    Button {
        // Llamar función para editar nombre
    } label: {
        Label("edit", systemImage: "pencil")
    }
    .tint(.blue)
}