Delete rows from a List using onDelete in SwiftUI
In this tutorial, we will see how to delete rows from a List using the onDelete()
modifier in SwiftUI.
SwiftUI provides us a onDelete()
modifier to control how objects should be deleted from a collection. This is almost always used with the List
and ForEach
loops.
We basically use the List to show the list of rows and the ForEach to create the rows individually. Then we can use the onDelete()
modifier to the ForEach
so users can delete any rows they no longer want.
Now have a look at the steps below to achieve this task.
Declare a @State property
First of all, I will create a @State
property that will allow the view to mutate and update its data.
@State var rows = Array(1...10)
In the above code, I have declared a @State
property called rows
that holds an array containing integers from 1 to 10.
Create the view
Now, I will create a List
of rows inside the NavigationStack
to provide a navigation interface. It enables a navigation bar and navigation-related functionality.
NavigationStack { List { ForEach(rows, id: \.self) { index in Text("Row \(index)") } } .navigationBarTitle("10 Rows") }
In the above code, Inside the NavigationStack I have used the List
to display a collection of rows.
Then, I used the ForEach to iterate over the rows
array to create rows in the list, the id: \.self
to specify that each row is uniquely identified by its own value.
Create a function to perform delete action
Now, I will create a function that will remove rows from a list when a user tries to delete them, using a set of indices called IndexSet
.
func deleteRow(at offsets: IndexSet) { rows.remove(atOffsets: offsets) }
The above function will be called when the user attempts to delete a row. This function will remove the rows from the rows
array at the specified indexes provided by offsets
.
Apply the onDelete() modifier to the ForEach
Now, I will apply the onDelete()
modifier to the ForEach loop to specify an action that should be performed when the user attempts to delete an item in a List
view. This modifier takes an argument called perform
, we can specify the deleteRow
function that I created earlier to perform the delete action.
.onDelete(perform: deleteRow)
The above code enables the delete function for the list, and it calls the deleteRow
function when the user tries to delete a row.
Now, have a look at the complete code below.
import SwiftUI struct ContentView: View { @State var rows = Array(1...10) var body: some View { NavigationStack { List { ForEach(rows, id: \.self) { index in Text("Row \(index)") } .onDelete(perform: deleteRow) } .navigationBarTitle("10 Rows") } } func deleteRow(at offsets: IndexSet) { rows.remove(atOffsets: offsets) } }
Output:
We can also add an Edit
button using the .navigationBarItems()
, we can delete items from the list using this Edit
button without swiping. But we can also swipe if we want.
Example
.navigationBarItems(trailing: EditButton())
The above code will add an Edit
button to the trailing (right) side of the screen. We have to apply this modifier to the List
to add the Edit
button.
Here is the complete code below
import SwiftUI struct ContentView: View { @State var rows = Array(1...10) var body: some View { NavigationStack { List { ForEach(rows, id: \.self) { index in Text("Row \(index)") } .onDelete(perform: deleteRow) } .navigationBarTitle("10 Rows") //To add the Edit button .navigationBarItems(trailing: EditButton()) } } func deleteRow(at offsets: IndexSet) { rows.remove(atOffsets: offsets) } }
Output:
Leave a Reply