Mastering SwiftUI Stacks for Better App Layouts

VStack: Use the VStack to arrange views in a vertical layout.

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Hello, Developer!")
                .font(.title)
                .foregroundColor(.blue)
                .padding(.bottom, 10)

            Text("You are Great!")
                .font(.headline)
                .foregroundColor(.green)

            Text("You are necessary to the world!")
                .font(.subheadline)
                .foregroundColor(.orange)
                .multilineTextAlignment(.center)
        }
        .padding()
        .background(Color(.systemGray6)) // Soft background
        .cornerRadius(10) // Rounded corners
        .shadow(radius: 5) // Soft shadow
    }
}

HStack: Use the HStack to arrange views in a horizontal layout.

 var body: some View {
        HStack(spacing: 15) {
            Text("iPhone")
                .font(.headline)
                .foregroundColor(.blue)

            Text("Operating")
                .font(.headline)
                .foregroundColor(.green)

            Text("System")
                .font(.headline)
                .foregroundColor(.orange)
        }
        .padding()
        .background(Color(.systemGray6)) // Soft background color
        .cornerRadius(10) // Slight rounded corners
        .shadow(radius: 5) // Soft shadow for depth
    }

ZStack / Depth Stack: It organizes your views so they are stacked on top of each other.

struct ContentView: View {
    var body: some View {
        ZStack {
            // Background color
            Color.blue
                .ignoresSafeArea()

            // Circle in the middle
            Circle()
                .frame(width: 200, height: 200)
                .foregroundColor(.yellow)

            // Text overlaying the circle
            Text("Hello, ZStack!")
                .font(.largeTitle)
                .foregroundColor(.white)
        }
    }
}