List view basics in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic SwiftUI list showing numbers 1 to 3.

iOS Swift

List {
    Text("One")
    Text("Two")
    Text("Three")
}.[1]

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

Apadding()

Bbackground(Color.red)

Cframe(width: 100)

DnavigationTitle("Numbers")

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding instead of navigationTitle.

Trying to set background color directly on List.

The navigationTitle modifier adds a title to the list's navigation bar.

2fill in blank

medium

Complete the code to create a list from an array of strings called fruits.

iOS Swift

let fruits = ["Apple", "Banana", "Cherry"]

List(fruits, id: \[1]) { fruit in
    Text(fruit)
}

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

Aself

Bfruit

Cid

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fruit' instead of 'self' for id.

Using an integer like 0 which is invalid here.

Using 'self' as id means each string itself is the unique identifier.

3fill in blank

hard

Fix the error in the code to display a list of numbers from 1 to 5.

iOS Swift

List(1...5) { number in
    Text("Number: \(number)")
}.[1]

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

Aid: \self

Bid: \number

Cid: \0

Did: \index

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the id parameter causes errors.

Using invalid id keys like \number or \index.

For ranges, use id: \self to uniquely identify each number.

4fill in blank

hard

Fill both blanks to create a list showing names with a title and a subtitle.

iOS Swift

struct Person {
    let name: String
    let job: String
}

let people = [Person(name: "Anna", job: "Designer"), Person(name: "Ben", job: "Developer")]

List(people, id: \.[1]) { person in
    VStack(alignment: .leading) {
        Text(person.[2])
        Text(person.job).font(.subheadline).foregroundColor(.gray)
    }
}

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

Aname

Bjob

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'job' as id which may not be unique.

Using 'title' which is not a property of Person.

Use 'name' as the id and to show the main text for each person.

5fill in blank

hard

Fill all three blanks to create a list with sections and headers.

iOS Swift

let fruits = ["Apple", "Banana"]
let veggies = ["Carrot", "Lettuce"]

List {
    Section(header: Text("[1]")) {
        ForEach(fruits, id: \.[2]) { fruit in
            Text(fruit)
        }
    }
    Section(header: Text("[3]")) {
        ForEach(veggies, id: \.self) { veg in
            Text(veg)
        }
    }
}

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

AFruits

Bself

CVegetables

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'name' as id for strings causes errors.

Mixing up the section header names.

The headers are 'Fruits' and 'Vegetables', and id is 'self' for strings.

Practice

1. What does the List view in SwiftUI primarily do?

easy

A. Displays multiple items vertically and allows scrolling if needed

B. Creates a horizontal stack of buttons

C. Shows a single image on the screen

D. Plays a video in full screen

Solution

1. Step 1: Understand the purpose of List

   The List view is designed to show many items arranged vertically.

2. Step 2: Recognize scrolling behavior

   If the items exceed the screen height, List allows vertical scrolling automatically.

3. Final Answer:

   Displays multiple items vertically and allows scrolling if needed -> Option A

4. Quick Check:

   List shows vertical scrollable items = B [OK]

Hint: List shows vertical scrollable items [OK]

Common Mistakes:

• Confusing List with horizontal stacks
• Thinking List shows only one item
• Assuming List plays media content

2. Which of the following is the correct syntax to create a simple list from an array of strings named fruits?

easy

A. List { fruits }

B. List(fruits) { fruit in Text(fruit) }

C. List(fruits, id: fruit) { Text(fruit) }

D. List(fruits, id: \.self) { fruit in Text(fruit) }

Solution

1. Step 1: Identify correct List initializer

   For simple arrays, use List(data, id: \.self) to uniquely identify each item.

2. Step 2: Check closure syntax

   The closure receives each item and returns a Text view displaying it.

3. Final Answer:

   List(fruits, id: \.self) { fruit in Text(fruit) } -> Option D

4. Quick Check:

   Use id: \.self for simple arrays = C [OK]

Hint: Use id: \.self for simple array lists [OK]

Common Mistakes:

• Omitting id: \.self causes errors
• Passing id: fruit instead of id: \.self
• Using List without closure for data

3. Given this code snippet, what will be displayed?

struct ContentView: View {
  let numbers = [1, 2, 3]
  var body: some View {
    List(numbers, id: \.self) { num in
      Text("Number: \(num * 2)")
    }
  }
}

medium

A. Number: 1, Number: 4, Number: 9

B. Number: 1, Number: 2, Number: 3

C. Number: 2, Number: 4, Number: 6

D. Number: 0, Number: 1, Number: 2

Solution

1. Step 1: Understand the data and transformation

   The array contains 1, 2, 3. Each number is multiplied by 2 in the Text view.

2. Step 2: Calculate displayed values

   1*2=2, 2*2=4, 3*2=6, so the list shows "Number: 2", "Number: 4", "Number: 6".

3. Final Answer:

   Number: 2, Number: 4, Number: 6 -> Option C

4. Quick Check:

   Multiply each number by 2 = A [OK]

Hint: Check how data transforms inside Text closure [OK]

Common Mistakes:

• Ignoring the multiplication inside the string
• Confusing array values with displayed text
• Assuming original numbers are shown

4. What is wrong with this SwiftUI List code?

struct ContentView: View {
  let items = ["A", "B", "C"]
  var body: some View {
    List(items) { item in
      Text(item)
    }
  }
}

medium

A. Missing id parameter for simple array causes a compile error

B. Text view cannot display strings directly

C. List requires items to be Int type

D. Closure syntax is incorrect

Solution

1. Step 1: Check List initializer requirements

   When using List with simple arrays like [String], you must provide an id parameter to identify each element uniquely.

2. Step 2: Identify missing id parameter

   The code omits id: \.self, so it will cause a compile-time error.

3. Final Answer:

   Missing id parameter for simple array causes a compile error -> Option A

4. Quick Check:

   Simple arrays need id: \.self in List = D [OK]

Hint: Always add id: \.self for simple arrays in List [OK]

Common Mistakes:

• Assuming List infers id automatically
• Thinking Text can't display strings
• Believing List only works with Int arrays

5. You have a custom struct Person conforming to Identifiable with a unique id. How do you create a List to display each person's name?

hard

A. List(people, id: \.name) { person in Text(person.name) }

B. List(people) { person in Text(person.name) }

C. List(people, id: \.self) { person in Text(person.name) }

D. List(people) { Text(person.name) }

Solution

1. Step 1: Understand Identifiable protocol usage

   If Person conforms to Identifiable, List can use the id property automatically without specifying id parameter.

2. Step 2: Use List with closure accessing person.name

   Simply pass people array and provide closure to show Text with person.name.

3. Final Answer:

   List(people) { person in Text(person.name) } -> Option B

4. Quick Check:

   Identifiable lets List infer id automatically = A [OK]

Hint: Use List(people) if Person is Identifiable [OK]

Common Mistakes:

• Adding redundant id parameter when Identifiable is used
• Using wrong key path for id
• Omitting closure parameter name