SwiftUI - List

---

---

In SwiftUI, a list view is a container that stores large data collections in a single scrollable column. It is commonly used to store hierarchical, dynamic and static data. It is the most important and useful component in designing the user interface of an app. So in this chapter, we are going to discuss how to create a list, type of list, etc.

Creating List in SwiftUI

In SwiftUI, we can create list with the help of List View. The list view arranges all the data in rows and then displays these rows in a vertical scrollable column. We can store any number of data in the list and a single UI can contain multiple lists.

Syntax

Following is the syntax−

List{
   Text("Item 1")
   Text("Item 2")
   Text("Item 3")
}

Example

The following SwiftUI program creates a list.

import SwiftUI
struct ContentView: View {    
   var body: some View {
      VStack{
         Text("Contacts")
         List{
            Text("Mohan")
            Text("Sohan")
            Text("Monika")
            Text("Mona")
            Text("Sona")
         }
      }
      
   }
}
#Preview {
   ContentView()
}

Output

Type of List in SwiftUI

In SwiftUI, we can create three types of lists using List View and they are as follows−

• Static List

• Dynamic List

• Hierarchical List

Static List in SwiftUI

A static list is a list in which the row data is fixed means we cannot change the data of rows. We can create a static list using List view. By default static list uses the InsetGrouped style to style the appearance of the list but we can change it using the listStyle() modifier.

Example

The following SwiftUI program creates a static list.

import SwiftUI
struct ContentView: View {   
   var body: some View {
      VStack{
         Text("Settings")
         List{
            Text("Wi-Fi")
            Text("Mobile Network")
            Text("Bluetooth")
            Text("Connection and sharing")
            Text("Wallpaper & Style")
            Text("Home Screen")
            Text("Display and Brightness")
         }
      }
      
   }
}
#Preview {
   ContentView()
}

Output

Dynamic List in SwiftUI

Dynamic lists are those in which we can change data. Or we can say that a dynamic list is used when we work with collections such as arrays, sets, etc whose data may change over time.

Example

The following SwiftUI program creates a dynamic list.

import SwiftUI
struct ContentView: View {   
   // Array
   let elements = ["Sohan", "Mohan", "Monika", "Sona", "Mona", "Seemran"]   
   var body: some View {
      VStack{         
         // Dynamic List
         Text("Contacts")
         List(elements, id:\.self){ x in
            Text(x)
         }
      }      
   }
}
#Preview {
   ContentView()
}

Output

Hierarchical List in SwiftUI

A hierarchical list is a special type of list in which we can display data in a nested structure, here the item will display in an expanded or collapsed list. Such types of lists are usefull when we work we data that have parent and child relationships. We can create a hierarchical list using List view along with DisclousreGroup or OutlineGroup.

The DisclousreGroup creates an expandable and collapsible section inside the given list. It is always visible whenever we click on the section whereas OutlineGroup is used to display data that is already in a hierarchy, it automatically handles the expansion and collapse of the elements. It generally works with data that conforms to Identifiable protocol.

Example

The following SwiftUI program creates a hierarchical list −

import SwiftUI
struct ContentView: View {
   var body: some View {
      VStack{
         Text("Contacts")
         List {
            DisclosureGroup("Studets") {
               Text("Mohan")
               Text("Sohan")
               Text("Meena")
            }
            DisclosureGroup("Teachers") {
               Text("Sonika")
               Text("Preeti")
               Text("Mina")
            }
         }
      }      
   }
}
#Preview {
   ContentView()
}

Output

List Section in SwiftUI

In SwiftIUI, we can also divide a list into sections of related items or data. Or we can say that a section is used to divide the list into groups of similar type of data. It enhances the readability of the list and also makes the list easy to navigate. A single list can contain multiple sections in it.

Syntax

Following is the syntax −

List{
   Section{
      // data
   }
   Section{

   }
}

Example

The following SwiftUI program creates a list with sections −

import SwiftUI
struct ContentView: View {   
   var body: some View {
      VStack{
         Text("Settings")
         List{
            Section{
               Text("Wi-Fi")
               Text("Mobile Network")
               Text("Bluetooth")
               Text("Connection and sharing")
            }
            Section{
               Text("Wallpaper & Style")
               Text("Home Screen")
               Text("Display and Brightness")
            }
         }
      }      
   }
}

#Preview {
   ContentView()
}

Output

Section With Header and Footers in SwiftUI

We can also provide headers and footers to the list. The header is used to provide the title to the section which tells the user what kind of data the following section contains, it is present at the top of the section.

Whereas the footer of the section provides some extra information about the respective section. It is present at the bottom of the section

Syntax

Following is the syntax −

List{
   Section(header:Text("")){
      // data
   }
   Section{

   }
}

Example

The following SwiftUI program creates a list which contains a section with header and footer.

import SwiftUI

struct ContentView: View {   
   var body: some View {
      VStack{
         Text("Settings")
         List{
            Section{
               Text("Wi-Fi")
               Text("Mobile Network")
               Text("Bluetooth")
               Text("Connection and sharing")
            }header: {
               Text("Network")
            }footer: {
               Text("All the network related Setting")
            }
            Section{
               Text("Wallpaper & Style")
               Text("Home Screen")
               Text("Display and Brightness")
            }header: {
               Text("Display Setting")
            }            
          
         }
      }      
   }
}
#Preview {
   ContentView()
}

Output