SwiftUI - Static List

---

---

SwiftUI provides a powerful component known as a list. A list is a container that is used to store data in a single column-like structure where each piece of data is known as an item of the list. A list is of two types: static and dynamic.

A static list is a list whose content cannot be changed, which means the items of the static list are pre-defined and do not depend upon any external data source. In this chapter, we are going to learn how to create static lists, customize static lists, and much more about static lists.

Creating Static List in SwiftUI

In SwiftUI, we can create a static list with the help of a List view. It displays all the specified data in a single column and the data present in the rows are known as items.

It also provides us with the ability to select one or more items from the list. We can also customize the list according to our requirements with the help of the modifiers provided by this view.

Syntax

Following is the syntax −

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

Example 1

The following SwiftUI program is used to create a static list. This list stores the names of the subjects.

import SwiftUI
struct ContentView: View {
   var body: some View {
      
      // Creating a simple static list
      List{
         Text("Maths")
         Text("Science")
         Text("English")
         Text("GK")
      }
   }
}
#Preview {
   ContentView()
}

Output

Creating List Sections in SwiftUI

In SwiftUI, we are allowed to create a group of one or more lists and display them in sections with the help of Section view. Or we can say that, a section is used to create a visual separation between each list, it is also used to hierarchy between the specified views.

We can also set the header and footer of each section. The content present at the top of the section is known as the header, it is commonly used to describe what a section contains whereas the content present at the bottom of the section is known as the footer of the section, it is used to display summaries or additional content related to that section.

Syntax

Following is the syntax −

List{
   Section{
      Text("item 1")
      Text("item 2") 
      Text("item 3")

   }header:{
      Text("My Header")
   }
   Section{
      Text("item 1")
      Text("item 2") 
      Text("item 3")

   }footer:{
      Text("My Footer")

   }
}

Example

The following SwiftUI program is used to draw a line from the given point.

import SwiftUI
struct ContentView: View {
   var body: some View {
      
      // Creating a static list with section
      List{
         Section{
            Text("Maths")
            Text("Science")
            Text("English")
            Text("GK")
         }header: {
            Text("Subjects")
         }
         Section{
            Text("Class 1")
            Text("Class 2")
            Text("Class 3")
            Text("Class 4")
         }header: {
            Text("Classes")
         }footer: {
            Text("These list contains all the enrolled students")
         }         
      }
   }
}
#Preview {
   ContentView()
}

Output

Custom Static List

A list is not limited to simple text items or sections, we can also add toggles, text-fields, steppers, sliders, icons, etc in it. SwiftUI allows us to store any type of data along with components in it. Let us create a custom list which contains the following things −

Example

The following SwiftUI program is used to create a custom list. Here the list contains the toggle and labeled content.

import SwiftUI

struct ContentView: View {
   @State var select = true
   var body: some View {
      
      // Creating a custom static list
      List{
         Section{
            Toggle(isOn: $select){
               Text("Maths")
            }
            LabeledContent("Class 1", value: "off")
            Text("Science")
         }
      }
   }
}
#Preview {
   ContentView()
}

Output