Hello, in this tutorial, I will show you how to use the SwiftUI List view.
List
Hello, in this tutorial, I will show you how to use the SwiftUI List view and also to handle swipe gesture events.
The List view in SwiftUI is one that we can stack views on top of each other while having the ability to scroll. It also allows us to easily add swipe actions to items in it.
Adding the List view
To add the List view, open the XCode Library and search for the List view in the Views menu.
Click on the "+" icon at the top of XCode 13 to access the Library.
Drag and drop the view inside the body of the layout.
Adding Items to the List
To add items to the list, drag and drop other views in between the curly brackets of the list.
Add a few labels so we’ll have a couple of views to work with.
Separating items
We can also separate views into groups by using a Section view.
Open the XCode library, search for Section and drag it inside the List view.
Then place some labels inside.
Adding different views
The List view is also not limited to Labels, we can use any views we want in the library.
To demonstrate, we can use a HStack to represent a single view for the list and inside the stack we can add more views, and it’ll all be counted as one item.
List {
...
HStack {
Text("Like")
Spacer()
Image(systemName: "link")
}
}
Adding Swipe Gesture
To add the swipe capability, open the XCode library and switch into the modifier menu. Search for “Swipe Actions.”
Attach it to a view inside the list by dragging and dropping it at the end of the view.
There are 3 arguments, edge represents the direction of which we can swipe. We can use .trailing or .leading.
.trailing means we can swipe from right to left
.leading means we can swipe from left to right
For now, we’ll use trailing.
allowsFullSwipe controls how far we can swipe.
If it is set to true, it means we can make a full swipe to activate the first action in the content.
If it is false, it will not allow us to swipe past the width of the contents and active the first action it encounters.
The contents section is where we put the actions and views we want to display when the swipe is active.
Add a button and set the text to delete.
For the action, print out a message.
Label("Codeible", systemImage: "hand.thumbsup")
.swipeActions(
edge: .trailing,
allowsFullSwipe: false) {
Button(action: {
print("Deleted")
}) {
Text("Delete")
}
}
If we go to the preview and swipe from right to left, the button will be displayed.
If we change allowsFullSwipe to true, we’ll be able to swipe farther, and it’ll close by itself.
allowsFullSwipe: true
Adding multiple actions and views
We can add multiple actions and views as well.
Place another button inside the contents section and change the text to “Cancel.”
For the action, print a new message.
Label("Codeible", systemImage: "hand.thumbsup")
.swipeActions(
edge: .trailing,
allowsFullSwipe: true) {
Button(action: {
print("Deleted")
}) {
Text("Delete")
}
Button(action: {
print("Canceled")
}) {
Text("Cancel")
}
}
When we swipe, we will see 2 buttons now.
If we test this in the emulator, it’ll print “Deleted” when we press on the Delete button and it will print out “Canceled” when we press on the Cancel button.
When we make a full swipe, it’ll active the first action and print out “Deleted.”
Supporting both directions
If we want to have the swipe capability on both directions, add another Swipe Action afterwards and use .leading for the edge.
Populating the List with an array
Now let’s see how we can use the List view with an array. Remove everything inside the List.
Begin by creating a struct with some data for the view.
struct ViewData {
var title: String
}
Create an array of objects using the new struct you have created.
let dataArray = [
ViewData(title: "Swuit UI Tutorial"),
ViewData(title: "List"),
ViewData(title: "Buttons"),
ViewData(title: "Labels"),
ViewData(title: "Navigation"),
ViewData(title: "In-App Purchase")
]
To apply this array to the List view, add a parenthesis in between the List declaration and the curly brackets, then put the array inside.
List (dataArray) {
}
You’ll see an error that says that our struct does not conform to “Identifiable.”
To fix this, go to the struct and inherit the Identifiable protocol.
Add a new property call id and set it to a new UUID(). This is required if we inherit the Identifiable protocol.
When the error is gone, right after the open curly brackets in the list declaration, put "data in."
"data" is a temporary variable to represent the current item in the loop. We can set it to anything.
Open the XCode library and add a Label after the in statement.
var body: some View {
List (dataArray){ data in
Label("Label", systemImage: "42.circle")
}
}
You can see that it added a Label for each item we have in the array in the preview.
Replace the text for each Label with the data from the array.
That is all for this video. If you find this video helpful, give it a like, share, and subscribe.
