List vs Form in SwiftUI

In this SwiftUI tutorial, we’ll learn to use List and Form of SwiftUI and what is the basic difference between these two.

What this blog will cover:

• Syntax and use of list.
• Syntax and use of Form.
• The basic difference between List and Form.

Syntax and use of List in SwiftUI

So we’ll start with the List first. Let’s see how we implement a list in SwiftUI and how it looks.

struct ContentView:View{
    var body: some View{
        VStack {
          List { //row in
                    Text("Row in a list")
                    Text("Row in a list")
                    Text("Row in a list")
              }
         }
      }
  }

Syntax and use of Form in SwiftUI

So now we’ll see the syntax of Form and how we use it.

struct ContentView:View{
    var body: some View{
        VStack(spacing: 40) {
            
            Form { //row in
                Text("I’m in a Form ")
                Text("I’m in a Form ")
                Text("I’m in a Form")
            }
    
            Text(".* ------------------------ *.")
                .foregroundColor(Color.mint)
                .fontWeight(.heavy)
            
            
            List { //row in
                    Text("Row in a list")
                    Text("Row in a list")
                    Text("Row in a list")
               }
            
      }
   }
 }

Difference between List and Form

As we can see by the look, they both look similar but are used for different purposes even though they look alike and we should stick to it because it makes the code more readable for other people looking at it.

The Form is used for making a form of any type where you need to take input from the user or anything like that. Settings view is one good example where we can use Form. We can use Form for a change password view as well. Let’s see how we can design a change password view using Form.

struct Employee{
    let  Name:String
    let  designation:String
}

struct ContentView:View{
    @State var password = ""
    @State var newPass = ""
  
  var body: some View{
        VStack(spacing: 0) {

            VStack{
                
                Text("Change Password Form")
                    .frame(maxWidth: .infinity, alignment: .topLeading)
                    .font(.title2)
                    .fontWeight(.bold).foregroundColor(Color.black)
                    .padding(.top, 10)
                    .padding(.leading, 20)

                
                Form
                {
                    TextField("New Password", text: $password).multilineTextAlignment(.center)
                    TextField("Confirm Password", text: $newPass).multilineTextAlignment(.center)
                    Button(action: {
                        
                    })
                    {   Text("Reset Password").frame(maxWidth: .infinity, alignment: .center)
                    }.tint(Color.cyan)
                }
            }
}

And as the name suggests the List is used for listing things of the same type.

Suppose any company wants to list their employee details they’ll use List. Let’s see how we’ll show employee details with a List

struct Employee{
    let  Name:String
    let  designation:String
}

//List VS Form
struct ContentView:View{
    @State var password = ""
    @State var newPass = ""
 
    let company = [
        Employee(Name: "Ali", designation: "iOS developer"),
        Employee(Name: "Sara", designation: "Android developer"),
    ]
    
    var body: some View{
        VStack(spacing: 0) {

            //Form
            Text("Change Password Form").frame(maxWidth: .infinity, alignment: .topLeading).font(.title2)
                    .fontWeight(.bold).foregroundColor(Color.black)
                    .padding(.top, 10)
                    .padding(.leading, 20)
                
                
                Form
                {//row in
                    
                    TextField("New Password", text: $password).multilineTextAlignment(.center)
                    TextField("Confirm Password", text: $newPass).multilineTextAlignment(.center)
                    Button(action: {
                        
                    }){   Text("Reset Password").frame(maxWidth: .infinity, alignment: .center)
                    }.tint(Color.cyan)
                }
            
            
            Text("- ------------------------ -").foregroundColor(Color.gray)
                .fontWeight(.heavy)
                .padding(.top, 20)
            
            
            // List
            Text("Employee List")
                .frame(maxWidth: .infinity, alignment: .topLeading).font(.title2)
                .fontWeight(.bold).foregroundColor(Color.black)
                .padding(.top, 20)
                .padding(.leading, 20)
            
            
            List(company, id: \.Name) { row in
                Text("Name: \(row.Name)\nDesignation: \(row.designation)")
            }
            
        }
        
    }
    
}

Also, they look similar on iOS platforms, but they may look different on macOS platforms. Let’s take a look at how the above view looks on MacOS.

One more thing that makes them differ from each other is that the Form doesn’t take any input while the List does.

Let’s see by example what this statement means.

struct ContentView:View{
    var body: some View{
        VStack(spacing: 40) {
            
            List(1..<4) { row in
                Text("Row \(row)")
            }
           
      }
   }
}

Here we have given the List a range, a count to which the List will execute its content. But you cannot do something like this with the form as the form doesn’t take any input. This has been the major difference between these two up until now.

Also check: Remove list padding in SwiftUI

Change spacing between VStack elements in SwiftUI