SwiftUI Layout Spacers & Alignment

SwiftUI Layout: Spacers & Alignment

Use Spacer() to distribute content and alignment parameters to control placement.

Spacers

Use Spacer() to distribute content and alignment parameters to control placement.

import SwiftUI

struct SpacersAlignmentDemo: View {
  var body: some View {
    HStack {
      Text("Left"); Spacer(); Text("Right")
    }
    .frame(maxWidth: .infinity, alignment: .leading)
    .padding()
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { SpacersAlignmentDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene { WindowGroup { ContentView() } }
}

Vertical Alignment and Guides

Align text baselines and customize positioning with alignment and alignmentGuide.

Syntax:

• HStack(alignment: .firstTextBaseline) { ... }
• .alignmentGuide(.firstTextBaseline) { d in d[.bottom] }
• VStack(alignment: .leading) { Spacer() }

import SwiftUI

struct AlignmentGuideDemo: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 16) {
      HStack(alignment: .firstTextBaseline, spacing: 8) {
        Text("Title").font(.title)
        Text("Aligned").alignmentGuide(.firstTextBaseline) { d in d[.bottom] }
      }
      HStack {
        Text("Left"); Spacer(); Text("Right")
      }
    }
    .padding()
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { AlignmentGuideDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene { WindowGroup { ContentView() } }
}