Why SwiftUI is the modern UI framework in iOS Swift - Build It to Prove It

Build: SwiftUI Benefits

This screen shows key reasons why SwiftUI is considered a modern UI framework for iOS apps.

Target UI

-------------------------
| SwiftUI Benefits       |
|-----------------------|
| * Declarative syntax   |
| * Live preview        |
| * Less code           |
| * Cross-platform      |
| * Accessibility built |
|                       |
| [Close]               |
-------------------------

Display a list of 5 reasons why SwiftUI is modern

Use a VStack with Text views for each reason

Add a header title at the top

Add a Close button at the bottom that prints 'Closed' when tapped

Starter Code

iOS Swift

import SwiftUI

struct SwiftUIBenefitsView: View {
    var body: some View {
        VStack {
            // TODO: Add header title here
            
            // TODO: Add list of reasons here
            
            Spacer()
            
            // TODO: Add Close button here
        }
        .padding()
    }
}

struct SwiftUIBenefitsView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIBenefitsView()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct SwiftUIBenefitsView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("SwiftUI Benefits")
                .font(.largeTitle)
                .bold()
                .padding(.bottom, 20)
            
            Text("* Declarative syntax")
            Text("* Live preview")
            Text("* Less code")
            Text("* Cross-platform")
            Text("* Accessibility built")
            
            Spacer()
            
            Button("Close") {
                print("Closed")
            }
            .frame(maxWidth: .infinity)
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
        }
        .padding()
    }
}

struct SwiftUIBenefitsView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIBenefitsView()
    }
}

This screen uses a vertical stack (VStack) to arrange the content from top to bottom.

The title uses a large, bold font to stand out.

Each reason is shown as a separate Text view with a bullet point for clarity.

The Close button is styled with a blue background and white text, filling the width for easy tapping.

When the Close button is tapped, it prints "Closed" to the console, simulating a close action.

This simple layout demonstrates SwiftUI's declarative syntax and easy UI building.

Final Result

Completed Screen

-------------------------
| SwiftUI Benefits       |
|-----------------------|
| * Declarative syntax   |
| * Live preview        |
| * Less code           |
| * Cross-platform      |
| * Accessibility built |
|                       |
| [Close]               |
-------------------------

Tapping the Close button prints 'Closed' in the debug console.

Stretch Goal

Add a toggle to switch between light and dark mode for the screen.

💡 Hint

Use @Environment(\.colorScheme) and a Toggle to switch colorScheme between .light and .dark.