SwiftUI-View Padding

---

---

The padding adds extra space around the UI elements to make them more readable. It is the most commonly used tool in user interface design. It improves both the functionality and appearance of the interface. It prevents content from appearing cluttered and ensures a clear distinction between each UI component on the view.

The ".padding" Modifier

SwiftUI supports a built-in modifier named padding() for padding. This modifier adds extra space around the content of a view. This extra space separates the content and the edges of the view which makes the view more attractive and readable. We can apply padding uniformly to all sides of the view or the individual edges.

This modifier can work with or without parameters. If this modifier does not contain any parameter, it will apply the same amount of padding to all the edges of the view.

Syntax

Following is the syntax −

.padding(edges, amount)

Parameter

This method can have the following optional parameters −

edge: It is used to specify on which side the padding should applied. The default value of this parameter is .all. It supports the following options −

• .all: It applies the same padding to all the edges of the view.

• .top: It applies padding only to the top edge of the view.

• .bottom: It applies padding only to the bottom edge of the view.

• .trailing: It applies padding only to the right edge of the view.

• .leading: It applies padding only to the left edge of the view.

• .horizontal: It applies padding to the top and bottom edges of the view.

• .vertical: It applies padding to the left and right edges of the view.

amount: It represents the amount of padding to be applied to the edges. The default value of this parameter is nil.

Let's understand the padding with the help of the following examples −

Example 1

The following SwiftUI program is used for uniform padding. Uniform padding is used when we want to apply the same padding to all the sides of a view. For the uniform padding, we will use the padding() modifier without any parameters.

import SwiftUI
struct ContentView: View {
   var body: some View {
     VStack{
       // Without padding
       Rectangle()
         .fill(Color.yellow)
         .frame(width: 300,height: 100, alignment: .center)
         .overlay(Text("TutorialsPoint").bold())       
       // With padding
       Rectangle()
         .fill(Color.yellow)
         .frame(width: 300,height: 100, alignment: .center)
         .overlay(Text("TutorialsPoint").bold().padding())       
      }     
   }
}
#Preview {
   ContentView()
}

Output

Example 2

The Following SwiftUI program is used for custom padding value. Custom padding is used when we want to apply a specific amount of padding uniformly to all the sides of the view. Here we pass a value to the padding(30) modifier for custom padding.

import SwiftUI

struct ContentView: View {
   var body: some View {
     VStack{
       // Without padding
       Rectangle()
         .fill(Color.yellow)
         .frame(width: 300,height: 100, alignment: .center)
         .overlay(Text("TutorialsPoint").bold())
       
       // With custom padding
       Rectangle()
         .fill(Color.mint)
         .frame(width: 300,height: 100, alignment: .center)
         .overlay(Text("TutorialsPoint").bold().padding(100))       
      }     
   }
}
#Preview {
   ContentView()
}

Output

Example 3

The Following SwiftUI program is used for padding values on specific sides. Here we apply padding on some specific side by passing the sides and their padding length in the padding modifier.

import SwiftUI

struct ContentView: View {
   var body: some View {
     VStack{
       // Without padding
       Rectangle()
         .fill(Color.yellow)
         .frame(width: 300,height: 100, alignment: .center)
         .overlay(Text("TutorialsPoint").bold())
       
       // With padding
       Rectangle()
         .fill(Color.mint)
         .frame(width: 300,height: 100, alignment: .center)
         .overlay(Text("TutorialsPoint").bold().padding(.bottom, 50).padding(.leading, 40))       
     }     
   }
}
#Preview {
   ContentView()
}

Output

Example 4

The Following SwiftUI program is used for padding with multiple sides. Here we apply padding on multiple sides at once by passing an array in the .padding() modifier.

import SwiftUI
struct ContentView: View {
   var body: some View {
     VStack{
       // Without padding
       Rectangle()
         .fill(Color.yellow)
         .frame(width: 300,height: 100, alignment: .center)
         .overlay(Text("TutorialsPoint").bold())
       
       // With padding
       Rectangle()
         .fill(Color.mint)
         .frame(width: 300,height: 100, alignment: .center)
         .overlay(Text("TutorialsPoint").bold().padding([.top,.leading], 50))       
     }     
   }
}
#Preview {
   ContentView()
}

Output