SwiftUI Layout Frames & Padding

SwiftUI Layout: Frames & Padding

Control size and layout using .frame() and spacing using .padding().

Fixed Frames

Use fixed width and height to size content.

Syntax:

• .frame(width: 160, height: 60)

import SwiftUI

struct FramesPaddingDemo: View {
  var body: some View {
    VStack(spacing: 16) {
      Text("Fixed size").frame(width: 160, height: 60).background(.blue.opacity(0.1))
      Text("Max width").frame(maxWidth: .infinity, alignment: .leading).padding(8).background(.green.opacity(0.1))
    }.padding()
  }
}

import SwiftUI

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

import SwiftUI

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

Flexible Frames and Alignment

Use min/max constraints and alignment to size content responsively.

Syntax:

• .frame(minWidth: 120, maxWidth: .infinity, alignment: .trailing)
• .frame(maxHeight: 120)

import SwiftUI

struct FlexibleFramesDemo: View {
  var body: some View {
    VStack(spacing: 12) {
      Text("Trailing")
        .frame(minWidth: 120, maxWidth: .infinity, alignment: .trailing)
        .padding(8)
        .background(.gray.opacity(0.1))
        .cornerRadius(6)
      Text("Tall block")
        .frame(maxWidth: .infinity)
        .frame(maxHeight: 120)
        .background(.orange.opacity(0.1))
        .cornerRadius(6)
    }
    .padding()
  }
}

import SwiftUI

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

import SwiftUI

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