How to use @Binding property wrapper in SwiftUI | Bootcamp #22

[Music] what's up everyone i'm nick welcome back in this video we're going to talk about the binding property wrapper and i would say that there are prerequisites to this video and it's understanding the state property wrapper which we did a couple videos back as well as how to extract sub views which we did in the last video so if you haven't watched those i would recommend watching those first and then coming back to this one but if you're all caught up you are obviously ready for this video and basically we use a binding property wrapper to connect a state variable from the parent view to a child view so for example let's imagine we had a parent view here which is maybe like the main screen and that screen had a background color that was a state variable and that state variable might change and then we had a sub view and that sub view could either be another screen or it could be just another button but inside that sub view we want to change the background color of the parent view well somehow we would need to connect that background color that has that state property wrapper to our sub view so that inside the sub view we could change the variable and we do that by declaring the variable in our sub view with a binding property wrapper and the binding just means that the state was declared somewhere else and we are connecting to that state so again it sounds harder than it is but i'm going to show you guys real simply how to do it so you can become experts so i'm back again in our xcode project as we always do let's create a new file for this video right click the navigator new file and we're talking about bindings in this one so it's going to be a swift ui view and let's call it binding bootcamp go ahead and click create once you're in that new file click resume on the preview and let's get coding i'm going to start off by just creating a very simple view on our screen let's add a z-stack open the brackets let's add a background layer we'll do color dot red we'll do edges ignoring safe area so that it goes to the edges of the screen and then let's add a button we'll do button open the parentheses i'm going to use the action and label completion hit enter on the action to make it two lines and on the button let's just make it look a little better we'll keep it saying button let's make the foreground white we'll make the background color dot blue let's add some padding between these two so before we add the background we'll add padding let's add a little more horizontal padding so we'll do padding this time we'll do dot horizontal so extra horizontal and let's just give it some rounded corners with a corner radius of 10. so our button looks good and when we click this button let's change the color of the background so we need a variable for the background color we will do at state var background color of type color and we'll start it equal to color dot green we'll take this background color variable put it into our code so now when we click this button we will change the background color to color dot orange the color you use doesn't actually matter obviously and you should understand exactly what's going on here because we've covered z stacks background colors states all of this in previous videos so i'm going to click resume hit play on the live preview and when i click this button the background color changes very very simple now in the last video we talked about extracting sub views so we could take this button or we could take the content layer and put it into its own view so let's do that again and usually we can hold the command button click the button and extract sub view but i'm going to show you manually how to do that if you don't want to use this shorthand completion so down here at the bottom underneath this view so this is where the view ends i'm just going to recreate this struct basically so it's going to be a struct with a name and a view open the brackets we'll do struct uh button view it'll be of type view and we'll open the brackets now every view needs to have a body that's what came by default when we started this file so we'll just add in here we'll add a body and we have a completion with some view so it's exactly what we want open the brackets and now we can fill in the body for what this button view is so just like in the last video we're going to take this button and we're going to give it its own and we're going to put it into its own view so i'm going to cut this button and i'm going to paste it into the body here so this is all the same as last video except now we're running into an issue and the issue is that this new view does not know what this background color variable is because we set this at state var background color in the first view but we don't have that variable in the second view so when we're calling that background color we're getting this error cannot find background color in scope and this is going to be a very common situation in your apps when you have a main view and then in a sub view like this button view you want to change something in the main view this is also the same format if you had a first screen and then you segued into a second screen and when you were on the second screen you wanted to change something back in the first screen this is the same situation so you have the background color which is in our parent view here and we want to change that background color by clicking something in our child view so you might think that we could just do another at state var background color equals color green but the problem is if we create another at state var that's creating another new variable and that would be separate from this background color what we want to do is create a variable that's going to actually connect to this background color so that when we change this variable in here it's actually changing our original background color variable so what we're going to do instead of using add state very simply we'll use at binding var and then we're going to call it background color in here and you could change the name of this if you wanted to change what it's going to be called within this sub view but oftentimes it's pretty common to use the same naming structure as the parent the original variable and all we need to do is tell this binding variable what type of variable it is just like we do up here so we'll do of type color and now in the initializer of button view every time we add button view it's going to ask us what is this background color variable that we want to connect to so let's go and do that in our first view so we're going to call button view here button view open the parentheses and now we have that initializer i was just talking about and you'll notice that it is a binding color so we'll hit enter and binding is just a fancy way of saying that this variable is going to connect to a state variable that was declared somewhere else so all we need to do is pass this variable and bind it into our new view so to do binding we will use the money sign and then we'll just add this variable which is the background color so now in our button view this variable at binding background color is actually connected to this state variable up here so when we change this background color in our view which we're going to do when we click this button it's actually going to change this at state variable at the top here and we've connected it by using an at binding so it might seem a little complicated but all app binding really does is connect a variable in a child view to a state variable that was declared in a parent view so let's go ahead and resume our canvas one more time let's click play on the live preview and we're going to click on our button and when we click on our button down here we're changing the background color again of this local variable but this variable is binding to the state variable that was declared in our parent view so when i click it behind the scenes we're actually changing this variable but this variable is actually connected to this variable and it all works sorry if i repeat myself a lot of people get confused on how bindings work so let's take this example a little bit further just to clarify everything now if i also wanted to when we click this button change the background on the button i could then just create that variable locally so instead of having to create it up here in the parent view because we don't have that color actually in this parent view it's it's only added down here in the child view so i could do at state var button color of type color and we'll set this equal to color.blue when it starts and when we click this button let's also change the button color let's also change the button color equal to color dot pink and we'll reference this state variable button color here so when we click the preview we can now click the button and you'll see that the button color is also changing but we've only added the state we only reference the button color within this sub view because it's only relevant to this little child however the background color is still within the parent view let's add a text to the z-stack as well let's put this button view into a v-stack and above the bottom view let's add a title we'll do text this is the title let's do foreground color white so right now it says this is the title let's make it a variable up here below the background color let's call at state var title of type string equals title we'll take this title we'll reference it in this text here click resume to make sure we're all connected it says title and now when we click this button view we want to change the title so as you probably guessed already if we go to change the title from our child view when we click this button we actually don't have a reference to this title state so all we have to do is in the child we'll add at binding var title of type string and now when we initialize the button view it's going to ask us to connect a variable to this title where it basically originates from so we get this error here automatically and when we go to fix it already asking us for the title to bind to so all we need to do is a money sign title and now we have access to changing this title variable in our child view so let's call title equals new title and let's zoom out here let's press resume on the canvas try this one last time before i wrap up the video when i click the button we can see that the title change the background color change and the button color changed but of course the background color and the title are referenced in our parent view which is this one and the button color is only referenced in our child view so this is efficient coding this is how you connect variables from one screen or one view to another you just use at binding so that's it for this video hope you guys learned something i apologize if this was super beginner and you guys already knew this i just wanted to show you the basics on how to connect state variables from view to view or screen to screen and as we start making apps we're going to use these states and bindings everywhere so pretty important to get a good handle on how they work as always i'm nick this is swiffle thinking and i'll see you guys in the next video you

Channel: Swiftful Thinking

Views: 31,268

Keywords: swiftui bootcamp, learn swiftui, swiftui binding, swiftui @Binding, @binding swiftui, binding swiftui, what is @binding in swiftui, what is @binding, what is binding swiftui, swiftui what is binding, swiftui what is @binding, how to use binding in swiftui, how to use @binding in swiftui, swiftui how to use binding, swiftui how to use @binding, swiftui @binding property wrapper, swiftui @binding not working, swiftui @binding vs @state, @binding, swiftui @binding variable

Id: btDMzB5x2Gs

Length: 12min 40sec (760 seconds)

Published: Sun Feb 14 2021