← All courses

Layout with Stacks and Modifiers

🗓 May 31, 2026 ⏱ 1 min read

Stacks

VStack(alignment: .leading, spacing: 10) {
    Text("Anand Gaur").font(.headline)
    HStack {
        Image(systemName: "star.fill").foregroundColor(.yellow)
        Text("Pro member")
    }
}
.padding()
.background(Color(.systemGray6))
.cornerRadius(12)

Modifiers

Modifiers like .padding(), .background() and .font() return a new view. Order matters — padding before background pads inside, after pads outside.

Tip: Use Spacer() inside a stack to push views apart and fill empty space.