Frame modifier in iOS Swift - Mini App: Build & Ship

Build: Frame Modifier Demo

This screen shows a colored rectangle with a frame modifier applied to control its size and alignment.

Target UI

---------------------
|                   |
|   [ Blue Box ]    |
|                   |
---------------------

Display a blue rectangle

Use frame modifier to set width to 150 and height to 100

Center the rectangle horizontally and vertically in the screen

Add a text label below the rectangle that says 'Blue Box'

Starter Code

iOS Swift

import SwiftUI

struct FrameModifierDemo: View {
    var body: some View {
        VStack {
            // TODO: Add blue rectangle with frame modifier here
            
            // TODO: Add label below rectangle
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.white)
    }
}

struct FrameModifierDemo_Previews: PreviewProvider {
    static var previews: some View {
        FrameModifierDemo()
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

iOS Swift

import SwiftUI

struct FrameModifierDemo: View {
    var body: some View {
        VStack(spacing: 20) {
            Rectangle()
                .fill(Color.blue)
                .frame(width: 150, height: 100)
            Text("Blue Box")
                .font(.headline)
                .foregroundColor(.black)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.white)
        .edgesIgnoringSafeArea(.all)
    }
}

struct FrameModifierDemo_Previews: PreviewProvider {
    static var previews: some View {
        FrameModifierDemo()
    }
}

We use a Rectangle view and fill it with blue color. The frame modifier sets the rectangle's width to 150 points and height to 100 points. The VStack arranges the rectangle and the label vertically with some spacing. The whole stack is centered by setting its frame to take the full available space with maxWidth and maxHeight set to infinity. This centers the content both horizontally and vertically. The label below the rectangle uses a headline font and black color for good contrast.

Final Result

Completed Screen

---------------------
|                   |
|                   |
|     █████████     |
|     █████████     |
|     █████████     |
|                   |
|     Blue Box      |
|                   |
---------------------

The blue rectangle is fixed size 150x100 points and centered on screen.

The label 'Blue Box' is shown below the rectangle.

No interactive elements on this screen.

Stretch Goal

Add a button below the label that changes the rectangle color to red when tapped.

💡 Hint

Use @State to hold the rectangle color and update it inside the button's action closure.