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)

Example

Demo.swift

ContentView.swift

App.swift

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()
  }
}

---

REMOVE ADS

---

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)

Example

Demo.swift

ContentView.swift

App.swift

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()
  }
}