Using Property Wrappers in SwiftUI

It’s been a long time since i shared my views / experience on SwiftUI or UIKit for starting new project ? in my previous article.

In this article we will try to understand and see how to use property wrappers in SwiftUI.

There are lots of articles available to walk you in detail through the theoretical part of Property Wrappers in SwiftUI. I would rather focus on actual usage with the help of a project.

In this project we have a simple Master-Detail Books application. We have a Books listing screen and a detail screen.

Download the source code from here to understand the usage better.

Getting Started

A quick overview of when to use which property wrappers:-

• If we have to modify anything inside structs locally we use @State property wrapper.
• If we want to pass the data to the child view and update the parent view whenever there is change in data in child view then we use @Binding property wrapper.
• If we want views to be notified of any changes in the properties in view model we use @Published property wrapper.
• If we want to use pre defined keys we use @Environment property wrapper.
• If we want the view to create the view model itself and own it then we use @StateObject property wrapper.
• If we do not want the view to create the view model itself but accept it as a parameter than we use @ObservedObject property wrapper.
• If we want same data to be accessed in multiple screens and update it from anywhere, then we use @EnvironmentObject property wrapper.

As we can see, here we need itemsInCart property to be changed inside struct so we used @State property wrapper. Every time there is a change in item count in cart, then view will render itself and updated count will be displayed.

Similarly here HomeView creates the HomeVM which is reference type so we used @StateObject property wrapper here and not @ObservedObject.

BooksCardView is a child view of HomeView. Here we have created itemsInCart as a @State property wrapper in HomeView and as a @Binding property wrapper in BooksCardView. Every time there is change in itemsInCart property in BooksCardView, it will notify it’s parent view i.e. HomeView so that it renders itself and update the item count in the cart.

This is one of the most important property wrapper in SwiftUI. Here we have used @Published property wrapper because it observes for any change in the booksArray property and it will notify the view immediately.
Note:- For view to render and update it whenever there is change in any @Published property, the view must be using @ObservedObject or @StateObject else the changes will be ignored.
Similarly for any property in view model which needs to notify view, that property must be created using @Published property wrapper else the view will not be updated.

Here we are using one of the predefined key \.presentationMode so we have used @Environment property wrapper.

Here we have used @ObservedObject property wrapper with DetailVM because DetailView is not creating the view model. DetailView is accepting it as a parameter.

Summary

I hope this article helps you in better understanding the usage of property wrappers in SwiftUI.

More articles with projects are coming soon to make you fall in love with SwiftUI.

Please feel free to share your views and any suggestions / feedbacks are welcomed.

Thanks for reading.