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.

Practice

1. What is the main purpose of using @ViewBuilder in SwiftUI?

easy

A. To handle network requests

B. To create animations automatically

C. To combine multiple views inside a closure cleanly

D. To manage data persistence

Solution

1. Step 1: Understand the role of @ViewBuilder

   @ViewBuilder is a result builder that allows combining multiple views inside a closure.

2. Step 2: Identify its main use in SwiftUI

   It helps write clean and readable UI code by letting you list views without extra syntax.

3. Final Answer:

   To combine multiple views inside a closure cleanly -> Option C

4. Quick Check:

   @ViewBuilder combines views [OK]

Hint: Remember: @ViewBuilder builds multiple views together [OK]

Common Mistakes:

• Confusing @ViewBuilder with animation or data tasks
• Thinking it manages data or network
• Assuming it creates views automatically without code

2. Which of the following is the correct way to declare a function using @ViewBuilder in SwiftUI?

easy

A. func buildView() -> some View { ... }

B. func buildView() -> @ViewBuilder some View { ... }

C. func buildView() @ViewBuilder -> some View { ... }

D. @ViewBuilder func buildView() -> some View { ... }

Solution

1. Step 1: Recall the syntax for using @ViewBuilder

   The attribute @ViewBuilder is placed before the function declaration.

2. Step 2: Check each option's syntax

   @ViewBuilder func buildView() -> some View { ... } correctly places @ViewBuilder before the function name. Others misuse placement.

3. Final Answer:

   @ViewBuilder func buildView() -> some View { ... } -> Option D

4. Quick Check:

   @ViewBuilder goes before func [OK]

Hint: Put @ViewBuilder right before the function keyword [OK]

Common Mistakes:

• Placing @ViewBuilder after the function name or return type
• Using it as a return type modifier
• Omitting @ViewBuilder when combining views

3. What will be the output of this SwiftUI code snippet using @ViewBuilder?

struct ContentView: View {
    @ViewBuilder
    func buildContent() -> some View {
        Text("Hello")
        Text("World")
    }
    var body: some View {
        buildContent()
    }
}

medium

A. Displays "Hello" and "World" stacked vertically

B. Displays only "World" text

C. Compilation error due to missing container view

D. Displays "HelloWorld" as a single text

Solution

1. Step 1: Understand @ViewBuilder behavior

   @ViewBuilder allows multiple views to be returned as a combined view, typically stacked vertically.

2. Step 2: Analyze the code output

   The two Text views "Hello" and "World" will be combined and shown one after another vertically.

3. Final Answer:

   Displays "Hello" and "World" stacked vertically -> Option A

4. Quick Check:

   Multiple views combined = stacked display [OK]

Hint: Multiple views in @ViewBuilder stack vertically by default [OK]

Common Mistakes:

• Thinking only last view shows
• Expecting a single concatenated text
• Assuming compilation error without explicit container

4. Identify the error in this SwiftUI code using @ViewBuilder:

struct MyView: View {
    @ViewBuilder
    func content() -> some View {
        if Bool.random() {
            Text("Yes")
        } else {
            Text("No")
        }
        Text("Always")
    }
    var body: some View {
        content()
    }
}

medium

A. Cannot have multiple views after conditional without grouping

B. Missing return keyword in function

C. Cannot use Bool.random() inside @ViewBuilder

D. Function must return a single Text view

Solution

1. Step 1: Understand @ViewBuilder rules with conditionals

   When using conditionals inside @ViewBuilder, all branches must return views, but multiple views after conditionals need grouping.

2. Step 2: Identify the problem in code

   The code has an if-else returning one Text each, then another Text outside. This causes multiple views at the same level without grouping, which is invalid.

3. Final Answer:

   Cannot have multiple views after conditional without grouping -> Option A

4. Quick Check:

   Multiple views after if-else need grouping [OK]

Hint: Group multiple views after conditionals inside a container [OK]

Common Mistakes:

• Ignoring need for grouping multiple views after if-else
• Thinking Bool.random() causes error
• Assuming return keyword is mandatory in @ViewBuilder functions

5. How can you modify this @ViewBuilder function to correctly return multiple views including a conditional view?

@ViewBuilder
func build() -> some View {
    Text("Start")
    if showExtra {
        Text("Extra")
    }
    Text("End")
}

Assuming showExtra is a Boolean variable.

hard

A. Remove the if condition and always show "Extra"

B. Wrap all views inside a VStack to group them

C. Return an array of views instead of using @ViewBuilder

D. Use multiple @ViewBuilder functions for each view

Solution

1. Step 1: Recognize the problem with multiple views and conditionals

   Multiple views including conditionals must be grouped inside a container view like VStack to form a single combined view.

2. Step 2: Apply grouping to fix the function

   Wrapping all views inside VStack { ... } groups them and allows conditional views without errors.

3. Final Answer:

   Wrap all views inside a VStack to group them -> Option B

4. Quick Check:

   Group views with container like VStack [OK]

Hint: Use VStack to group multiple views with conditionals [OK]

Common Mistakes:

• Trying to return multiple views without grouping
• Removing conditionals instead of fixing structure
• Returning arrays which is not supported as View