How to add swipe actions to a List in SwiftUI

To add swipe actions to your list in SwiftUI, you can use two modifiers:

1. onDelete()
2. swipeActions(edge:allowsFullSwipe:content:)

Using the onDelete Modifier

First, we will create a list in our ContentView and a variable called 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)
            }
        }
        .onDelete(perform: deleteName)
    }
}

This code shows a list of names. Now we will create a function to remove names from our array, taking an IndexSet as a parameter, which is provided by the completion action within the onDelete modifier:

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

Then, add the onDelete modifier just after the ForEach, like this:

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

Once the modifier is added, if we run our application, we can perform a swipe action to delete a name.

It’s important to note that the .onDeletemodifier can only be used on collections or arrays.

Example of a swipe action using the onDelete modifier

Using the swipeActions Modifier

With this modifier, you can add custom buttons to your list. Before seeing how to use the modifier, let’s examine the parameters that can be passed:

• edge: Can be of two types, .leading or .trailing, with the latter being the default value. This parameter determines the position of your swipe action, i.e., if the swipe action is performed from left to right or right to left.

Example using .leading

Example of a swipe action using the .leading edge

• allowsFullSwipe: A boolean indicating whether, when performing a full swipe, the first action is automatically executed. The default value is true.
• content: The content with your buttons.

Let’s see how to use this modifier in our previous example:

First, remove the onDelete(perform: deleteName) modifier from our ForEach.

Then, add the new swipeActions modifier as follows:

ForEach(names, id: \.self) { name in
    Text(name)
        .swipeActions(edge: .trailing, allowsFullSwipe: false) {
            Button(role: .destructive) {
                // Call function to delete name
                // It's equivalent to using the onDelete modifier
            } label: {
                Label("delete", systemImage: "trash.fill")
            }
        }
}

As you can see, we are creating a button with a .destructive role, indicating that the button will be the typical button for deleting items from a list, with its characteristic red color. This time, you can customize the button’s content, as we did when using the onDelete modifier, and in our case, we created a button with a Label with the text “delete” and the SF symbol “trash.fill.”

Similarly, you can add more buttons as you created the previous one.

.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)
}

If you want to read the Spanish version of this article, you can find it here: https://asynclearn.com/blog/como-agregar-swipe-actions-a-una-lista-swiftui/