SwiftUI - View Spacing

---

---

Spacing is the most important feature of SwiftUI, it allows user to adjust the space between the views. It enhances the appearance of views and make them much more readable. We can control the spacing using either through default values or by custom adjustment. In SwiftUI, we can manage spacing using the following methods −

• spacer() method

• spacing property

Spacer() Method in SwiftUI

The Spacer() method is used to create a space between the given views. It provide maximum space in compare with other spacing methods. It is commonly used in stack layout, but we are allowed to use it outside the stack layout. If it is used inside a stack layout, then it expend along the axis of its containing stack.

Suppose it is present in HStack, then it expend along the X-axis. If it is present outside the stack layout, then it expend in all the axis. We are allowed to use multiple spacer() in the same layout.

Syntax

Following is the syntax −

Spacer(minLength:CGFloat?)

It can take only one optional parameter that is minLength. It represent the minimum length to which the Spacer will shrink the space between the given views.

Example 1

The following SwiftUI program add space in between the given view.

import SwiftUI
struct ContentView: View {   
   var body: some View {
     VStack{
       HStack{         
         // Without Spacer
         Text("Hello").font(.title2)
         Text("TutorialsPoint").font(.title2)
       }
       HStack{
         
         // With Spacer
         Text("Hello").font(.title2)
         Spacer()
         Text("TutorialsPoint").font(.title2)
         
       }
     }
   }
}
#Preview {
   ContentView()
}

Output

Example 2

The following SwiftUI program add space in between the given view.

import SwiftUI
struct ContentView: View {   
   var body: some View {
     VStack{
       Text("Hello").font(.title2)
       Text("TutorialsPoint").font(.title2)
     }
     
     // Spacer() method outside Stack layout
     Spacer()
     VStack{
       Text("Hello").font(.title2)
       Text("TutorialsPoint").font(.title2)
     }
   }
}
#Preview {
   ContentView()
}

Output

Spacing Property in SwiftUI

We can also adjust the spacing of the view with the help of Stack layout's spacing property. This property only works within stack layout only. It can work with all three stacks including VStack, ZStack and HStack.

Syntax

Following is the syntax −

VStack(spacing:value){
   //code
}

Example

The following SwiftUI program add space in between the given view using spacing property.

import SwiftUI
struct ContentView: View {
   var body: some View {     
     // Stack without spacing parameter
     VStack(){
       Text("Hello").font(.title2)
       Text("TutorialsPoint").font(.title2)
     }     
     // Stack with spacing parameter
     VStack(spacing:40){
       Text("Hello").font(.title2)
       Text("TutorialsPoint").font(.title2)
      }
   }
}
#Preview {
   ContentView()
}

Output