SwiftUI uses result builders - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Text view inside a VStack.

Swift

VStack {
    [1]("Hello, SwiftUI!")
}

Drag options to blanks, or click blank then click option'

AButton

BText

CImage

DList

Attempts:

3 left

💡 Hint

Common Mistakes

Using Button or Image instead of Text to show text.

The Text view displays a string in SwiftUI. Inside a VStack, you use Text to show text.

2fill in blank

medium

Complete the code to add a Button with a label inside a VStack.

Swift

VStack {
    Button(action: {
        print("Clicked")
    }) {
        [1]("Tap me")
    }
}

Drag options to blanks, or click blank then click option'

AText

BVStack

CImage

DSpacer

Attempts:

3 left

💡 Hint

Common Mistakes

Using VStack or Spacer inside the Button label.

The Button label is usually a view like Text that shows the button's title.

3fill in blank

hard

Fix the error in the code by completing the VStack content with multiple views.

Swift

VStack {
    Text("Hello")
    [1]("World")
}

Drag options to blanks, or click blank then click option'

AButton

BSpacer

CImage

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Using Button or Image where Text is expected.

To show multiple text lines inside a VStack, use multiple Text views.

4fill in blank

hard

Fill both blanks to create a VStack with a Text and a Button label.

Swift

VStack {
    [1]("Welcome")
    Button(action: {}) {
        [2]("Click here")
    }
}

Drag options to blanks, or click blank then click option'

AText

BImage

DSpacer

Attempts:

3 left

💡 Hint

Common Mistakes

Using Image or Spacer instead of Text.

The VStack contains a Text view and a Button with a Text label.

5fill in blank

hard

Fill all three blanks to create a VStack with a Text, an Image, and a Button label.

Swift

VStack {
    [1]("Hello")
    [2](systemName: "star.fill")
    Button(action: {}) {
        [3]("Press")
    }
}

Drag options to blanks, or click blank then click option'

AText

BImage

DSpacer

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up Image and Text or using Spacer incorrectly.

The VStack contains a Text view, an Image with a system icon, and a Button with a Text label.