EducaSwift

These are some of the most common SwiftUI modifiers that you can apply to any View.

onAppear

The onAppear modifier is triggered when a view is displayed on the screen. It's typically used to start tasks such as fetching data, starting animations, or updating the view's state when it becomes visible.

struct ContentView: View {
    @State private var message = "Loading..."

    var body: some View {
        Text(message)
            .onAppear {
                message = "Welcome to SwiftUI!"
            }
    }
}

In this example, the onAppear modifier updates the text when the view first appears, changing the message to "Welcome to SwiftUI!".

Use Cases:

• Fetching data when the view appears.
• Starting animations when the user navigates to a new view.
• Tracking when a view becomes visible in a scrolling list.

onDisappear

The onDisappear modifier is the counterpart to onAppear, triggered when the view is removed from the screen. This is useful for stopping ongoing tasks, cleaning up resources, or saving the state when the user navigates away from the view.

struct ContentView: View {
    var body: some View {
        Text("View is active")
            .onDisappear {
                print("The view has disappeared.")
            }
    }
}

In this example, when the view disappears, SwiftUI prints a message to the console, indicating that the view is no longer visible.

Use Cases:

• Stopping timers or animations when a view disappears.
• Saving user input or state before the view is dismissed.
• Cancelling network requests or background tasks when the user navigates away.

onChange

The onChange modifier is triggered when a specific value changes. It observes a binding or state property and performs an action whenever that value is updated. This modifier is useful for tracking dynamic changes in the UI.

struct ContentView: View {
    @State private var name = ""

    var body: some View {
        TextField("Enter your name", text: $name)
            .onChange(of: name) { newValue in
                print("Name changed to \(newValue)")
            }
    }
}

In this example, whenever the user types in the TextField and updates the name value, the onChange modifier is triggered, printing the new value of name to the console.

Use Cases:

• Responding to user input as it changes (e.g., form validation).
• Tracking the state of controls like sliders, switches, or pickers.
• Handling changes in data models or network states.

onTapGesture

The onTapGesture modifier detects and responds to taps on a view. It's a simple way to handle user interactions, such as triggering an action when a button is pressed, navigating to another screen, or updating state on tap.

struct ContentView: View {
    @State private var counter = 0

    var body: some View {
        Text("Tapped \(counter) times")
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
            .onTapGesture {
                counter += 1
            }
    }
}

In this example, the Text view responds to a tap gesture by increasing the counter value. Each time the user taps the view, the counter increments, and the text updates accordingly.

Handling Multiple Taps:

You can also specify the number of taps required to trigger the action:

Text("Double Tap Me")
    .onTapGesture(count: 2) {
        print("Double tapped!")
    }

This version responds only to a double-tap gesture, making it useful for more complex interaction patterns.

Use Cases:

• Triggering an action when a view is tapped (e.g., buttons or images).
• Handling user gestures for more intuitive UI interactions.
• Using gestures to navigate between views or toggle options.

Quiz Time!

Next Question

Your Score:

Repeat

Share