SwiftUI| Complete Guide To Lists

Published in

Geek Culture

4 min readJan 31, 2022

SwiftUI allows us to showcase and manipulate data in the form of a list. It is easier to implement lists in SwiftUI than UIKit. You can simply make a list by calling the predefined List control. How you decide to do so really depends on the type of data, which will be discussed later on in the post. The main point, however, is that lists are an easy alternative to showcase data into your view.

In today’s blog, I am going to talk about Static and Dynamic lists, Sections, List Styles, Insets, Deleting Rows , Moving Rows, and Selecting Rows.

Static and Dynamic Lists

To demonstrate the concept of Static and dynamic lists, please keep in mind that all the examples codes make the following list.

STATIC LIST

Static Lists are lists that are made with predefined SwiftUI controls. Even though the example code uses Text(), you can also use other views such as shapes, images, sliders, and etc. When implementing a static list, you must add every row manually into the list.

DYNAMIC LIST

Dynamic Lists consist of more complex data.Unlike Static Lists, they take in the same type of data and can be more effient to make since it iterates through its values.

1. Range : This takes in values that are of type Range<Int> so whenever you want to iterate through values ranging from a to b use this method to do so.

Range Example:

2. Random Access Collection Protocols: Values that conform to Random Access Collections must have an id. Use one of the two following methods to implement this protocol.

A. id: Given a list of values, set an id for each value using the .\self keyword.

id Example:

B. Identifiable Protocol: Create a instance with the Identifiable protocol. This allows the instance to have a predefined id value. Create a separate list containing those values and pass them in.

Identifiable Protocol Example:

Static And Dynamic Lists

Use ForEach: ForEach allows us to use Random Access Collection protocols and Range<Int> types. This allows us to add different values into the list. This will also let us use static variables as value types into the list.

Adding Sections,Headers, and Footers

We can also seperate the list into sections and add Headers and Footers by calling Sections. Please keep in mind that footers are only available in certain list styles( later disscussed). Follow the following format to make a single section.

Format:

List{
   Section(header:Text(""),footer:Text(""){
     ...
   }     
}

Format example:

ListStyles

There are a total of 6 list styles. Simply call .listStyle( _ ) to format the list accordingly.

DefaultListStyle( ): shows footer
GroupedListStyle( ): shows footer
InsetGroupedListStyle( ): shows footer
PlainListStyle( ): does not shows footer
SidebarListStyle( ): does not shows footer
InsetListStyle( ): does not shows footer

Format:

List{
...
}
.listStyle(DefaultListStyle())

example:

List Insets: Formatting Rows

You can add padding to the values( including the header and footer as a group )relative to the the cell itself with .listRowInset( _ ).

Use the following Format

List{
...
}
.listRowInsets(EdgeInsets.init(top: CGFloat, leading: CGFloat, bottom: CGFloat, trailing: CGFloat))

Adding Functionality

It is important that you call embed the list inside a NavigationView when implementing the functions that will soon be disscussed. As a navigation property either add

.toolbar{EditButton()}

navigationBarItem(trailing: EditButton())

to indicate that you are going to add functionalities to your list

OnDelete/onMove

You can delete and move cells by implementing separate functions to do so. call these functions with .onMove( _ ) and .onDelete( _) and add the functions names as parameters.

The variables inside of the list should contain Random Access Collection Protocols.

Delete Rows

func removeVal(at offsets: IndexSet){        self.list1.remove(atOffsets: offsets)
}

Move Rows

func moveList(from source: IndexSet,to destination: Int){    self.list1.move(fromOffsets: source, toOffset: destination)}

Example:

Row Selection

Selecting Rows is a little bit different than deleting or moving rows. You don’t have to create separate functions to implement this functionality but you have to create a @State variable that contains an empty set of type UUID.

@State private multilineSelection = Set<UUID>()

The variables inside of the list should be Identifiable.