Extract Views | raywenderlich.com


This is a companion discussion topic for the original entry at https://www.raywenderlich.com/18176818-your-first-ios-and-swiftui-app-polishing-the-app/lessons/6
1 Like

Ray It’s not looking more organised!

The concept is clear in this video, however, the video feels so rushed. I hope it continues to get clearer in later lessons. :slight_smile:

@matt_manning @enoeht Sorry for making the video feel rushed! Sometimes it’s hard to know what might seem too fast for a newcomer. Are there any parts in particular you feel could use some more explanation or time?

Hi Ray, I know a lot of it is most likely me being new to development in general. However, I would say being new, I didnt full understand there is so much than just writing the code. The model concepts, how things interact and including core programming concepts. So when one sees beginner, it seems overwhelming and doesnt click right away.

Thanks for taking the time to respond, I’ve been trying to learn coding via the internet and I think the biggest problem is you and many others have is there’s no student you are teaching live. If you had someone preferably a beginner in the videos they would ask the questions that others can’t. I realise it takes more effort but you would probably gain quite an advantage over your competitors.

Thanks Matt.

RE: “Extract Views”…
The only thing that I didn’t understand was why I had to declare the game var using @binding within the InstructionsView struct? This was not necessary when using $sliderValue. My guess is that it has to do with the scope, since that is the only difference that I see with the $game and $sliderValue vars.

@webdevbyalex Sure, let me try and explain that. At this point of the course, the “state” of Bull’s Eye is defined by these three variables:

@State private var alertIsVisible = false
@State private var sliderValue = 50.0
@State private var game = Game()

Basically, if you know whether or not the alert is visible, what the current slider value is, and what the state of the Game is (i.e. the random target, score, and round), you know what should be displayed on the screen. Another way of thinking about it is that those three variables above are the “source of truth”.

Here’s the key point: notice that these variables are owned by the main view (ContentView). If you need to pass these values to another view, you can’t pass them directly; you need to pass a binding to these.

If you put a $ before a state variable, it converts it to a binding. That’s what we do for sliderValue:

Slider(value: $sliderValue, in: 1.0...100.0)

You can think of this kinda like Slider having a reference to the “source of truth”, which is owned by ContentView. So when you update ContentView's sliderValue, the Slider will update too.

Slider is a SwiftUI view created by programmers at Apple. For InstructionsView, we’re creating our own SwiftUI view, and we need to specify any bindings to the “source of truth” we need to draw this view:

struct InstructionsView: View {
  @Binding var game: Game
  ...

Here we’re saying “InstructionsView needs access to the game state in order to draw itself”.

When we create an InstructionsView, we use the $ to convert the state variable to a binding:

InstructionsView(game: $game)

I hope this helps / makes sense? Please let me know if anything here is confusing. You might find it helpful to check out the video we first talk about bindings again from the first course too:

Hello, I have a question about this lecture. You said at 09:20 that body can only return one View but I just put them without the VStack and it worked exactly the same. What changed after your video was posted and now?. Thanks