How to Use the SwiftUI Layout System

You might easily be tempted to take this topic for granted, especially if you came from an UIKit/AppKit background, and directly dive into the SwiftUI toolkit, but that would be a mistake.

The layout system for SwiftUI works very different than how it worked before in UIKit/AppKit. If you do not take the time to fully understand how the layout system works you will end up fighting to achieve even the simplest layouts and you will miss out on some of the important building blocks that help you build the most sophisticated custom user interfaces.

The SwiftUI Layout System

• How to Use the SwiftUI Layout System
• How to Use Stacks in SwiftUI
• How to Use Alignments in SwiftUI

(More to come …)

The Layout Basics

To demonstrate how the layout system works, let’s start off with an extremely basic app entirely build in SwiftUI.

import SwiftUI
@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
struct ContentView: View {
    var body: some View {
        Text("Hello World")
    }
}