Property Wrapper In SwiftUI

Introduction

 

Property wrappers in SwiftUI provide us with variables with a special logic depending on the type of property wrapper. The main goal here is wrapping properties with logic which can be extracted into the separated struct to reuse it across the codebase. 

 

@State

 

State property remains persistent in memory for as long as the view exists. When that state changes, SwiftUI knows to automatically reload the view with the latest changes so it can reflect the latest changes.

 

@state belongs to the specific view and never gets used outside that view, so it's important to make those properties  private to reinforce that idea.

 

You can easily declare a state by putting the @State keyboard in front of a variable.

 

Example

//
//  ContentView.swift
//  Demo Property Wrapper
//
//  Created by Pravesh Dubey on 04/03/20.
//  Copyright © 2020 Pravesh Dubey. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    @State private var age = 31
    var body: some View {
        VStack{
            Text("\(age)")
            Button(action: {self.age += 1}){
                 Text("Tap me!")
            }
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

@Binding 

 

Use a binding to create a two-way connection between a property that stores data and a view that displays and changes the data. A binding connects a property to a source of truth stored elsewhere, instead of storing data directly. @binding provides access by reference for a value type.

 

Example

//
//  PlayerView.swift
//  Demo Property Wrapper
//
//  Created by Pravesh Dubey on 05/03/20.
//  Copyright © 2020 Pravesh Dubey. All rights reserved.
//

import SwiftUI

struct PlayerView: View {
        @State private var isPlaying: Bool = false
        var body: some View {
            VStack {
                PlayButton(isPlaying: $isPlaying)
            }
        }
}
struct PlayerView_Previews: PreviewProvider {
    static var previews: some View {
        PlayerView()
    }
}
struct PlayButton: View {
    @Binding var isPlaying: Bool
    var body: some View {
        Button(action: {
            self.isPlaying.toggle()
        }) {
            Image(systemName: isPlaying ? "pause.circle" : "play.circle")
        }
    }
}

The above uses a special character, $ , to pass anchor link, because without  the $ symbol Swift will pass a copy of the value instead of the anchor link itself.

 

@ObservedObject

 

A property wrapper type that subscribes to an observable object and invalidates a view whenever the observable object changes. ObservedObject works similarly to State property but the main difference is that we can divide it among several independent views that can subscribe and watch for changes to this object. As soon as changes appear SwiftUI rebuilds all Views bound to this Object.

 

Whatever type you use with @ObservedObject should conform to ObserableObject Protocol. When you create properties on observable objects you get to decide whether changes to each property should force the view to refresh or not. 

 

There are multiple ways for an observed object to notify views that important data has changed, but the easiest is using @Published property wrapper. ObservableObject is capable of the following things,

• ObservableObjects are wrapping classes not variables.
• These classes can contain data, for example, a string assigned to a variable. 
• We can bind one or multiple views of the ObservableObject.
• The observing view can access and manipulate the data inside the ObservableObject. When a change happens to the Observableobject's data all observing views get automatically rendered, similar to when the state changes. 

Example

//
//  UserSettingsView.swift
//  Demo Property Wrapper
//
//  Created by Pravesh Dubey on 05/03/20.
//  Copyright © 2020 Pravesh Dubey. All rights reserved.
//

import SwiftUI

struct UserSettingsView: View {
    @ObservedObject var settings = UserSettings()
    var body: some View {
        VStack {
            Text("Your score is \(settings.score)").padding(20)
            Button(action: {
                self.settings.score += 1
            }) {
                Text("Increase Score")
            }
        }
    }
}

struct UserSettingsView_Previews: PreviewProvider {
    static var previews: some View {
        UserSettingsView()
    }
}
class UserSettings: ObservableObject {
    @Published var score = 0
}

@EnvironmentObject

 

An environmentObject is a property wrapper for a data model which once initialized, can share data to all views of your app. The environmentObject is created by supplying an ObservableObject.

 

@EnvironmentObject is a value that is made available to your views through the application itself. It's shared data that every view can read if they want to. 

 

Example

struct ContentView: View {
    @EnvironmentObject var settings: UserSettings

    var body: some View {
        NavigationView {
            VStack {
                // A button that writes to the environment settings
                Button(action: {
                    self.settings.score += 1
                }) {
                    Text("Increase Score")
                }

                NavigationLink(destination: DetailView()) {
                    Text("Show Detail View")
                }
            }
        }
    }
}
struct DetailView: View {
    @EnvironmentObject var settings: UserSettings

    var body: some View {
        // A text view that reads from the environment settings
        Text("Score: \(settings.score)")
    }
}

Common differences 

• Use @State for simple properties that belong to a single view. They should usually be marked private.
• Use @ObservedObject for complex properties that might belong to several views. Any time you're using a reference type you should be using @ObservedObject for it. 
• Use @EnvironmentObject for properties that were created elsewhere in the app, such as shared data.