Swipe actions in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a trailing swipe action in a SwiftUI List.

iOS Swift

List {
    Text("Item 1")
        .swipeActions(edge: .trailing) {
            Button(role: .destructive) {
                print("Delete tapped")
            } label: {
                Label("Delete", systemImage: "trash")
            }
        [1]
}

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

A]

B)

C}

D;

Attempts:

3 left

💡 Hint

Common Mistakes

Using a parenthesis ')' instead of a brace '}' to close the swipeActions block.

Forgetting to close the swipeActions block causing a syntax error.

The swipeActions modifier block must be closed with a closing brace '}'.

2fill in blank

medium

Complete the code to specify the edge for swipe actions on the leading side.

iOS Swift

List {
    Text("Item 2")
        .swipeActions(edge: [1]) {
            Button {
                print("Edit tapped")
            } label: {
                Label("Edit", systemImage: "pencil")
            }
        } 
}

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

A.leading

B.top

C.bottom

D.center

Attempts:

3 left

💡 Hint

Common Mistakes

Using .top or .bottom which are invalid for swipeActions edge parameter.

Using .center which is not a valid edge option.

The edge parameter accepts .leading or .trailing to specify swipe direction. Here, .leading is correct.

3fill in blank

hard

Fix the error in the swipe action button role to make it destructive.

iOS Swift

List {
    Text("Item 3")
        .swipeActions {
            Button(role: [1]) {
                print("Remove tapped")
            } label: {
                Label("Remove", systemImage: "trash")
            }
        }
}

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

A.destructive

B.cancel

C.normal

D.default

Attempts:

3 left

💡 Hint

Common Mistakes

Using .default or .normal which are not valid roles in this context.

Using .cancel which is for cancel actions, not destructive.

The role .destructive marks the button as a destructive action, showing red color and warning.

4fill in blank

hard

Fill both blanks to create a swipe action with a custom tint color and a label.

iOS Swift

List {
    Text("Item 4")
        .swipeActions(edge: .trailing) {
            Button {
                print("Flag tapped")
            } label: {
                Label("Flag", systemImage: [1])
            }
            .tint([2])
        }
}

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

A"flag.fill"

B"flag"

C.red

D.yellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong system image name causing the icon not to appear.

Using a string instead of a Color for the tint modifier.

The system image name is "flag" (without .fill) and the tint color is .yellow for a custom highlight.

5fill in blank

hard

Fill all three blanks to create a swipe action with a leading edge, a button role, and a system image.

iOS Swift

List {
    Text("Item 5")
        .swipeActions(edge: [1]) {
            Button(role: [2]) {
                print("Pin tapped")
            } label: {
                Label("Pin", systemImage: [3])
            }
        }
}

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

A.leading

B.destructive

C"pin"

D.trailing

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up .leading and .trailing edges.

Using invalid roles or missing quotes around system image names.

The swipe action is on the leading edge, the button role is destructive, and the system image is "pin".