Your First iOS & SwiftUI App: An App from Scratch

If you build and run Bullseye, you’ll notice that you can’t currently move the slider.

If you recall, this is because when we first set up the Slider, we set it up to a constant value of 50.

This is a good time to look at a useful Xcode feature. It allows you to find out more about just about anything in the code that has a name.

➤ While holding down the option key, move the cursor over the .constant in the line Slider(value: .constant(10)). The word constant should change color and the cursor’s shape should change to a question mark (?). Click on constant. A pop-up window will appear with more details about constant.

The summary text — “Creates a binding with an immutable value” — may sound like meaningless techno-babble to you now, but the words binding and immutable should be hints that state has something to do with it.

Let’s dive a little bit deeper into what’s going on here.

If you’ve ever gone to a restaurant where the sign (or their web site) said they were open, only to find that they were closed when you tried to enter, you’ve experienced what happens when a user interface (which is the “open” sign) doesn’t match the state (which is the place was actually closed).

This similar to the example we talked about earlier, where your car dashboard is broken, causing you to get a ticket - or worse.

This kind of problem happens when the user interface and state aren’t connected. In the restaurant example, keeping the “open/closed” sign in sync with the restaurant’s actual open/closed state means that someone has to make sure that the sign is always providing the right information.

If you’ve ever worked in the food service industry, you know that the kind of dedication and reliability needed to make sure that the sign is always right is rare.

As we talked about earlier, you may have seen this sort of problem happen in software as well. As applications grow, their state becomes more complex, and it’s all too easy to forget to update some part of the user interface when some state detail changes.

Remember, SwiftUI was designed to solve the problem of the mismatch between user interface and application state. One of the things SwiftUI provides to help with this is something called Bindings.

Bindings are a fancy way of saying that a particular user interface view will always be tied to a particular state value.

For example, in this video you’re going to learn how to bind the Slider view to a state variable that stores the value of the slider. By doing this, every time you move the Slider, the state variable will automatically be updated to match. And vice versa: if you update the state variable, the Slider will also automatically update. Effectively, they are “bound” together.

Let’s see how we can use SwiftUI bindings to solve the mystery of the slider.

First, delete the knock knock button and associated code.

Add after alertIsVisible:

@State private var sliderValue: Double = 50.0

Change slider line to:

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

Build & run. Point out initial value.