0
0
iOS Swiftmobile~20 mins

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

Choose your learning style9 modes available
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.