SwiftUI - Dynamic List

In SwiftUI, a dynamic list is a list whose data can be changed dynamically. It automatically updates and re-renders whenever the underlying data gets changed. The contact list and message box list of iOS are common real-life examples of dynamic lists, they change whenever a new contact is added or a new message is added to the list. So in this chapter, we are going to learn how to create a dynamic list in SwiftUI and more about dynamic lists.

Creating Dynamic List in SwiftUI

SwiftUI provide a pre-defined List view to create both static and dynamic lists. It displays data in the rows of single vertically scrollable columns. It is the ideal way to store data without knowing the actual length of the data set. So we create a dynamic list using a data source such as array, structure, collection, etc., and the list will updated automatically whenever the data source gets updated with the help of ForEach View. The ForEach View is used to iterate over the given collection of elements and identify each element uniquely.

Syntax

Following is the syntax −

List{
   ForEach(dataSource, id: \.self){ item in
      Text(item)
   }
}

Example

The following SwiftUI program is used to create a dynamic list.

import SwiftUI

struct ContentView: View {
   @State var elements = ["Python", "C++", "Swift", "C", "Java"]
   var body: some View {
      
      // Creating a dynamic list
      List(elements, id: \.self){language in Text(language)
      }
   }
}
#Preview {
   ContentView()
}

Output

Adding Items in Dynamic List in SwiftUI

There are various ways to add an item in the dynamic list, but here we will use TextField to enter a new item and .append modifier to add a new value in the given array that is used to create a dynamic list.

import SwiftUI

struct ContentView: View {
   
   @State private var elements = ["Python", "C++", "Swift", "C", "Java"]
   @State private var lang = ""
   
   var body: some View {
      
      Text("Programming Languages").font(.title)
      
      // Creating a dynamic list
      List(elements, id: \.self){language in Text(language)
      }
      
      TextField("Add Langugae", text: $lang).onSubmit {
            if lang.isEmpty{
               elements.append(lang)
               lang = ""
         }
      }.padding()
   }
}
#Preview {
   ContentView()
}    

Output

Removing Items from Dynamic List in SwiftUI

To remove items from the dynamic list we have to remove data from the underlying data source and the changes will reflect automatically in the list. So we use the onDelete(perform:) modifier to enable swipe-to-delete gesture, it allows the user to delete items from the dynamic list. Here we use an array as a data source, so the onDelete() modifier uses the remove(at:) method to remove an element from the array.

import SwiftUI
struct ContentView: View {   
   @State private var elements = ["Python", "C++", "Swift", "C", "Java"]   
   var body: some View {
      VStack {
         Text("Programming Languages")
            .font(.title)
         
         // Creating a dynamic list with swipe-to-delete functionality
         List {
            ForEach(elements, id: \.self) { language in
               Text(language)
            }
            .onDelete(perform: deleteElements) 
         }
         .padding()
      }
   }
   // Function to delete selected elements
   func deleteElements(at offsets: IndexSet) {
      elements.remove(atOffsets: offsets)
   }
}
#Preview {
   ContentView()
}    

Output