SwiftUI - @Binding Property Wrapper Explained - Passing Data

today i'm going to show you how to pass data between two views using binding and swift ui before i walk you through the starter project let me show you what i mean by passing data between two views with binding so here i have my main view here in the simulator and you see a nighttime view and there's also a daytime view with a blue background and a cloud that you'll see you know later but the idea here is you would tap change time of day and you can either tap make day or make night and that would update this view here you know i'm kind of slowly sliding the modal down right so you're passing the data specifically it's a boolean called is night to change the background in the image but you're passing it from this modal to this main view and it's going to update the main view even though the information happens on the modal so that's what i mean by connecting two views via a binding okay so that's the principle let's actually make it happen because right now when i tap make day nothing happens that's what we're gonna fix okay so a real quick rundown of the starter project just to catch you up here here's that is night boolean i was talking about right so you see is night is true so on the right here in the preview we get the night time but if i make is a night false you'll see hit resume on the preview we get the daytime version right so that's what i mean by we're going to change the time of day between the two views so let me change that back to true in this basic view here we have a z stack that way i can get the color background you can see based on is night i make the background black or system blue right night or day in the v stack my time of day image and my button label let's talk about that real quick because this is the only custom stuff that i've made so time of day image which is this moon in the stars you can see here uh all it is is just an image with all the modifiers on it right resizable rendering mode aspect ratio frame i just refactored it out so i could have just you know one line here and you see we pass in the name of the image which is moonstar's fill or cloud sun fill based on you know is night and then same thing with the button label here the other custom object uh i just basically this green button you see here right we have the frame the background color we pass in the color we also pass in the title and the image basically just again refactored out the styling so i could just have one line here and then here we are presenting the sheet to show the uh change time of day view and then change time of day view is just those two buttons that you saw there again we're reusing our button label now you see why i refactored it out so i didn't have that three times uh and then when you tap the button you know we dismiss the modal but here's where we're gonna actually make some magic happen so let's talk about this now uh the content view right we want to change this is night variable on the content view however the action happens on the change time of day view so that's the connection we got to make right so what we need to do is have a binding to is night again binding kind of like connects the two variables right so we want to pass a binding to is night uh to the change time of day view so to do that we'll create at binding var is night and then that is going to be of type boolean we don't give it an initial value because of binding you have to pass in the value and then let me update our preview real quick because now when we're doing our preview it's going to expect the is night parameter and then in the previews for your for binding and stuff like that you can do constant and then we're going to pass in false that's just kind of to give it a default value and to make the preview happy but now what we have we have a binding to is night so now when we create our change time of day view right here in our sheet it's telling us hey we're missing that is night parameter so now when we're passing a binding to this other view we have to have it in the initializer right so we initialize a change time of day view within a binding to is night right so we want to pass the binding to dot is night so this binding is what makes the connection that on change time of day view now when we tap a button we have a connection to this is night however we need to change it when appropriate right so we have this button you can see our make night button so we want to have is night equal true on our when our make night button is tapped so is night equals true and then down here on our make day button we want to have is night be false right because we want to be day is night equals false so what we do here when we tap the button we're making the is night boolean on our change time of day view false however it is a binding to our content views is night so this will also update to false which will again trigger the redraw on this screen and make this uh the day view so again our two screens are bound you know on this is night variable so when we update it on the change time of day it's also going to update on the content view let's run it in the simulator and see it in action so we're tapping change time of day and we have our our binding to the is night variable so now when i tap make day we're making is night equal false there you go now we're getting the day if i tap change time of day say make night we're gonna now is night is gonna be true and now it updates on the other screen so that is a very simple example of passing a boolean in this case between the two views however uh you know it doesn't have to be a boolean right we could be passing a string let's say on on this modal we want to have the user like enter their name or something like that and we want the name to update on the main screen well now you would pass a binding to a string this could be a binding to an integer you could have an enum in here maybe we had a change time of day and we had like early morning late morning early afternoon dusk we had like five different times of days well now we could have like an enum that we passed back and update that so i want to be clear doesn't have to be a boolean this is just a very basic example to illustrate the concept now one quick disclaimer because you can see this could get uh could be a slippery slope right what if you had other views on this screen and now you're passing binding down three and four layers you're like you could do that you could pass a binding down five views in the in the view hierarchy that's not recommended you know just because you can doesn't mean you should uh in my opinion if you're passing it down more than one level like this is one level right now if we had a view on this modal where we needed to pass is night down again that's when you might want to start looking into an environment which is a different topic for a different video but just know that if you find yourself passing a binding down four screens uh you should probably rethink that and consider environment just keep this to like going down one level so that's binding in swift ui hope you enjoyed the video if you like my teaching style my presentation style i started creating my own courses at the website you see here there's also a link in the description you can watch the first 10 of each course for free to get a feel for it again hope you enjoyed it and we'll catch you in the next one you

Channel: Sean Allen

Views: 29,888

Keywords: Swift, Swift Tutorial, iOS Developer, iOS Development, Swift Code Tutorial, Swift app tutorial, Sean Allen, SwiftUI, Passing Data in SwiftUI, Pass Data between views SwiftUI, @Binding, @Binding in SwiftUI, SwiftUI @Binding, How to pass data between views SwiftUI

Id: lgtB3WLEOYg

Length: 6min 22sec (382 seconds)

Published: Tue Mar 16 2021