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.