Custom space between Hstack elements in SwiftUI

In this tutorial, we’ll learn how to give custom space between HStack subviews in SwiftUI. Hstack, also known as Horizontal Stack is a container like VStack which arranges its subviews into a horizontal line as its name implies.

By default, the space between the subviews of HStack is 10 points. But luckily we can change it by providing value to the spacing in the initializer of HStack; alternatively, we can use the padding modifier. The padding modifier lets us give space to each subview individually.

Let’s see how we give custom space between the HStack elements

Providing Custom Space to HSTack SubViews in SwiftUI

HSTack with default spacing

Let’s first look at what the HStack looks like by default.

struct ContentView:View{
    var body: some View{
        
        VStack(spacing: 20){
            
            HStack( ){
                Image(systemName: "house")
                Image(systemName: "house")
                Image(systemName: "house")
            }

      }
    }
}

We can see there’s a default space of 10 points between its elements. We’ll just see in this tutorial ahead how to change this default spacing and give the custom spacing of our choice.

Using the HStack Initializer for giving equal space

SwiftUI comes with a Hstack initializer that takes the value for the spacing parameter and then HStack divides all the subviews equally to that specified spacing value.

struct ContentView:View{
    var body: some View{
        
        VStack(spacing: 20){

            HStack( ){
                Image(systemName: "house")
                Image(systemName: "house")
                Image(systemName: "house")
            }
            
            Text("-----------------")
           
            //dividing equally
            HStack(spacing: 30){
                Image(systemName: "house")
                Image(systemName: "house")
                Image(systemName: "house")
            }
      }
  }
}

Using the padding modifier for giving individual space to each subview

Giving value to the spacing will divide subviews equally to that specified spacing value. But we can also give each subview its individual spacing either to the left or right or bottom anywhere. We can do this by simply using the padding modifier.

Space to the right of the SubView

struct ContentView:View{
    var body: some View{
        
        VStack(spacing: 20){

            HStack( ){
                Image(systemName: "house")
                Image(systemName: "house")
                Image(systemName: "house")
            }
            
            Text("-----------------")
           
            //dividing equally
            HStack(spacing: 30){
                Image(systemName: "house")
                Image(systemName: "house")
                Image(systemName: "house")
            }
            
            Text("-----------------")
           
            //giving space to the right of the first image
            HStack{
                Image(systemName: "house").padding(.trailing,30)
                Image(systemName: "house")
                Image(systemName: "house")
            }
            
             
      }
   }
}

Space to the bottom of the SubView

struct ContentView:View{
    var body: some View{
        
        VStack(spacing: 20){

            HStack( ){
                Image(systemName: "house")
                Image(systemName: "house")
                Image(systemName: "house")
            }
            
            Text("-----------------")
           
            //dividing equally
            HStack(spacing: 30){
                Image(systemName: "house")
                Image(systemName: "house")
                Image(systemName: "house")
            }
            
            Text("-----------------")
           
            //giving space to the right of the first image
            HStack{
                Image(systemName: "house").padding(.trailing,30)
                Image(systemName: "house")
                Image(systemName: "house")
            }
            
            
            Text("-----------------")
            
            //space to the bottom of the center image
            HStack{
                Image(systemName: "house")
                Image(systemName: "house").padding(.bottom,30)
                Image(systemName: "house")
            }          
          
        }
        
    }
}