Getting Started with Layout in SwiftUI

SwiftUI is Apple’s declarative UI framework designed to unify UI development across iOS, macOS, watchOS, and tvOS. Layouts are handled using a combination of stacks and modifiers.

Stack Basics

• VStack: Vertical layout
• HStack: Horizontal layout
• ZStack: Overlapping layers

Example:

VStack(alignment: .leading) {
    Text("Welcome")
    Text("To SwiftUI")
}

Modifiers

Modifiers change how views are displayed:

Text("Styled Text")
    .font(.headline)
    .padding()
    .background(Color.yellow)
    .cornerRadius(10)

Responsive Layouts

Use GeometryReader to access size data:

GeometryReader { geometry in
    Text("Width: \(geometry.size.width)")
}

Building Reusable Views

struct CustomCard: View {
    var title: String

    var body: some View {
        VStack {
            Text(title)
                .font(.title)
                .padding()
        }
        .background(Color.gray.opacity(0.2))
        .cornerRadius(8)
    }
}

Wrap-Up

SwiftUI makes UI development elegant and concise. Learn to compose views with stacks and leverage modifiers to build beautiful, responsive interfaces across Apple platforms.