5. Moving Data Between Views

Written by Audrey Tam

In the previous chapter, you structured your app’s data to be more efficient and less error-prone. In this chapter, you’ll implement most of the functionality your users expect when navigating and using your app. Now, you’ll need to manage your app’s data so values flow smoothly through the views and subviews of your app.

Managing Your App’s Data

SwiftUI has two guiding principles for managing how data flows through your app:

• Data access = dependency: Reading a piece of data in your view creates a dependency for that data in that view. Every view is a function of its data dependencies — its inputs or state.
• Single source of truth: Every piece of data that a view reads has a source of truth, which is either owned by the view or external to the view. Regardless of where the source of truth lies, you should always have a single source of truth.

Tools for Data Flow

SwiftUI provides several tools to help you manage the flow of data in your app. The SwiftUI framework takes care of creating views when they should appear and updating them whenever there’s a change to data they depend on.

Property wrappers augment the behavior of properties. SwiftUI-specific wrappers like @State, @Binding, and @EnvironmentObject declare a view’s dependency on the data represented by the property.

Each wrapper indicates a different source of data:

• A @State property is a source of truth. One view owns it and passes either its value or a reference, known as a binding, to its subviews.
• A @Binding property is a reference to a @State property owned by another view. It gets its initial value when the other view passes it a binding, using the $ prefix. Having this reference to the source of truth enables the subview to change the property’s value, and this changes the state of any view that depends on this property.
• @EnvironmentObject declares dependency on some shared data — data that’s visible to all views in a sub-tree of the app. It’s a convenient way to pass data indirectly instead of passing data from parent view to child to grandchild, especially if the in-between child view doesn’t need it.

You’ll learn more about these, and other, property wrappers in Chapter 11, “Managing Data With Property Wrappers”.

Using State & Binding Properties

Skills you’ll learn in this section: using @State and @Binding properties; pinning a preview; adding @Binding parameters in previews

Here’s your first feature: Set up TabView to use tag values. When a button changes the value of selectedTab, TabView displays that tab.

➤ Continue with your project from the previous chapter or open the project in this chapter’s starter folder.

Passing the Binding of a State Property

➤ In ContentView.swift, add this property to ContentView:

@State private var selectedTab = 9

Note: You almost always mark a State property private, to emphasize that it’s owned and managed by this view specifically. Only this view’s code in this file can access it directly. An exception is when the App needs to initialize ContentView, so it needs to pass values to its State properties. Learn more about access control in Swift Apprentice, Chapter 18, “Access Control, Code Organization & Testing”.

Declaring selectedTab as a @State property in ContentView means ContentView owns this property, which is the single source of truth for this value.

Other views will use the value of selectedTab, and some will change this value to make TabView display another page. But, you won’t declare it as a @State property in any other view.

The initial value of selectedTab is 9, which you’ll set as the tag value of the welcome page.

➤ If the preview is paused, refresh it, then click the pin button to pin the preview of ContentView:

You’ll soon be editing WelcomeView.swift and ExerciseView.swift. Pinning the preview of ContentView means you’ll be able to preview the results without needing to go back to ContentView.swift.

➤ Next, replace the entire body closure of ContentView with the following code:

var body: some View {
  TabView(selection: $selectedTab) {
    WelcomeView(selectedTab: $selectedTab)  // 1
      .tag(9)  // 2
    ForEach(Exercise.exercises.indices, id: \.self) { index in
      ExerciseView(selectedTab: $selectedTab, index: index)
        .tag(index)  // 3
    }
  }
  .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
}

1. You pass the binding $selectedTab to WelcomeView and ExerciseView so TabView can respond when they change its value. Xcode complains you’re passing an extra argument because you haven’t yet added a selectedTab property to WelcomeView or ExerciseView. You’ll do that soon.
2. You use 9 for the tag of WelcomeView.
3. You tag each ExerciseView with its index in Exercise.exercises.

Adding a Binding Property to a View

➤ Now, in ExerciseView.swift, add this property to ExerciseView, above let index: Int:

@Binding var selectedTab: Int

You’ll soon write code to make ExerciseView change the value of selectedTab, so it can’t be a plain old var selectedTab. Views are structures, which means you can’t change a property value unless you mark it with a property wrapper like @State or @Binding.

ContentView owns the source of truth for selectedTab. You don’t declare @State private var selectedTab here in ExerciseView because that would create a duplicate source of truth, which you’d have to keep in sync with the selectedTab value in ContentView. Instead, you declare @Binding var selectedTab — a reference to the @State variable owned by ContentView.

➤ You need to update previews because it creates an ExerciseView instance. Add this new parameter like this:

ExerciseView(selectedTab: .constant(1), index: 1)

You just want the preview to show the second exercise, but you can’t pass 1 as the selectedTab value. You must pass a Binding, which is tricky in a standalone situation like this, where you don’t have a @State property to bind to. Fortunately, SwiftUI provides the Binding type method constant(_:) to create a Binding from a constant value.

➤ Now, add the same property to WelcomeView in WelcomeView.swift:

@Binding var selectedTab: Int

➤ And add this parameter in its previews:

WelcomeView(selectedTab: .constant(9))

Now that you’ve fixed the errors, you can preview ContentView while you’re still in WelcomeView.swift:

Changing a Binding Property

Next, you’ll implement the Welcome page Get Started button action to display the first ExerciseView.

➤ In WelcomeView.swift, replace Button(action: { }) { with this:

Button(action: { selectedTab = 0 }) {

You’ve used selectedTab to navigate from the welcome page to the first exercise!

➤ Now, in the ContentView Live Preview, tap Get Started.

Note: You can’t preview this action in the WelcomeView preview because it doesn’t include ExerciseView. Tapping Get Started doesn’t go anywhere.

Next, you’ll work even more magic in ExerciseView.swift.

Using the Ternary Conditional Operator

Your users will be exerting a lot of physical energy to perform the exercises. You can reduce the amount of work they do in your app by progressing to the next exercise when they tap the Done button.

➤ First, simplify your life by separating the Start and Done buttons in ExerciseView. In ExerciseView.swift, replace Button("Start/Done") { } with this HStack:

HStack(spacing: 150) {
  Button("Start Exercise") { }
  Button("Done") { }
}

Keep the font and padding modifiers on the HStack, so both buttons use title3 font size, and the padding surrounds the HStack.

➤ Fix the indentation: Select the font and padding modifiers, then press Control-I.

Now you’re ready to implement your time-saving action for the Done button: Tapping Done goes to the next ExerciseView, and tapping Done in the last ExerciseView goes to WelcomeView.

➤ First, add this to the other properties in ExerciseView:

var lastExercise: Bool {
  index + 1 == Exercise.exercises.count
}

You created a computed property to check whether this is the last exercise.

➤ Now, back to Button("Done") { } and replace it with the following code:

Button("Done") {
  selectedTab = lastExercise ? 9 : selectedTab + 1
}

Swift Tip: The ternary conditional operator tests the condition specified before ?, then evaluates the first expression after ? if the condition is true. Otherwise, it evaluates the expression after :.

Later in this chapter, you’ll show SuccessView when the user taps Done on the last ExerciseView. Then dismissing SuccessView will progress to WelcomeView.

Computed Properties for Buttons

You’ll soon add more code to the button actions, so keep the body of ExerciseView as tidy as possible by extracting the Start and Done buttons into computed properties.

➤ Add these properties to ExerciseView:

var startButton: some View {
  Button("Start Exercise") { }
}

var doneButton: some View {
  Button("Done") {
    selectedTab = lastExercise ? 9 : selectedTab + 1
  }
}

➤ In body, replace the two Button views in the HStack with your new properties:

HStack(spacing: 150) {
  startButton
  doneButton
}

➤ Now, in the ContentView Live Preview, tap Get Started to load the first exercise. Tap Done on each exercise page to progress to the next. Tap Done on the last exercise to return to the welcome page.

Next-page navigation is great, but your users might want to jump directly to their favorite exercise. You’ll implement this soon.

Setting & Tapping Images

Skills you’ll learn in this section: passing a value vs. passing a Binding; making Image tappable

Using ?: to Set an Image

Users expect the page numbers in HeaderView to indicate the current page. A convenient indicator is the fill version of the symbol. In light mode, it’s a white number on a black background.

➤ In HeaderView.swift, replace the contents of HeaderView with the following code:

@Binding var selectedTab: Int  // 1
let titleText: String

var body: some View {
  VStack {
    Text(titleText)
      .font(.largeTitle)
    HStack {  // 2
      ForEach(Exercise.exercises.indices, id: \.self) { index in  // 3
        let fill = index == selectedTab ? ".fill" : ""
        Image(systemName: "\(index + 1).circle\(fill)")  // 4
      }
    }
    .font(.title2)
  }
}

1. HeaderView doesn’t change the value of selectedTab, but it needs to redraw itself when other views change this value. You create this dependency by declaring selectedTab as a @Binding.

2. The Welcome page doesn’t really need a page “number”, so you delete the "hand.wave" symbol from the HStack.\

3. To accommodate any number of exercises, you create the HStack by looping over the exercises array, just like in ContentView.

4. You create each symbol’s name by joining together a String representing the integer index + 1, the text ".circle" and either ".fill" or the empty String, depending on whether index matches selectedTab. You use a ternary conditional expression to choose between ".fill" and "".

➤ Now previews needs this new parameter, so replace it with the following:

HeaderView(selectedTab: .constant(0), titleText: "Squat")
  .previewLayout(.sizeThatFits)

Next, you need to update the instantiations of HeaderView in WelcomeView and ExerciseView.

➤ In WelcomeView.swift, change HeaderView(titleText: "Welcome") to the following:

HeaderView(selectedTab: $selectedTab, titleText: "Welcome")

➤ In ExerciseView.swift, change HeaderView(titleText: Exercise.exercises[index].exerciseName) to the following:

HeaderView(
  selectedTab: $selectedTab,
  titleText: Exercise.exercises[index].exerciseName)

➤ In the ContentView Live Preview, tap Get Started to load the first exercise. The 1 symbol is filled. Tap Done on each exercise page to progress to the next and see the symbol for each page highlight.

Using onTapGesture

Making Page Numbers Tappable

Many users expect page numbers to respond to tapping by going to that page.

➤ In HeaderView.swift, add this modifier to Image(systemName:):

.onTapGesture {
  selectedTab = index
}

This modifier reacts to the user tapping the Image by setting the value of selectedTab.

➤ In the ContentView Live Preview, tap a page number to navigate to that exercise page:

Congratulations, you’ve improved your app’s user experience out of sight by providing all the navigation features your users expect.

Indicating & Changing the Rating

The onTapGesture modifier is also useful for making RatingView behave the way everyone expects: Tapping one of the five rating symbols changes the color of that symbol and all those preceding it to red. The remaining symbols are gray.

➤ First, add a rating property to ExerciseView. In ExerciseView.swift, add this to the other properties:

@State private var rating = 0

In Chapter 7, “Saving Settings”, you’ll save the rating value along with the exerciseName, so ExerciseView needs this rating property. You use the property wrapper @State because rating must be able to change, and ExerciseView owns this property.

➤ Now scroll down to RatingView() and replace it with this line:

RatingView(rating: $rating)

You pass a binding to rating to RatingView because that’s where the actual value change will happen.

➤ In RatingView.swift, in RatingView_Previews, replace RatingView() with this line:

RatingView(rating: .constant(3))

➤ Now replace the contents of RatingView with the following code:

@Binding var rating: Int  // 1
let maximumRating = 5  // 2

let onColor = Color.red  // 3
let offColor = Color.gray

var body: some View {
  HStack {
    ForEach(1 ..< maximumRating + 1, id: \.self) { index in
      Image(systemName: "waveform.path.ecg")
        .foregroundColor(
          index > rating ? offColor : onColor)  // 4
        .onTapGesture {  // 5
          rating = index
        }
    }
  }
  .font(.largeTitle)
}

1. ExerciseView passes to RatingView a binding to its @State property rating.
2. Most apps use a 5-level rating system, but you can set a different value for maximumRating.
3. When rating is an integer between 1 and maximumRating, the first rating symbols should be the onColor, and the remaining symbols should be the offColor.
4. In the HStack, you still loop over the symbols, but now you set the symbol’s foregroundColor to offColor if its index is higher than rating.
5. When the user taps a symbol, you set rating to that index.

➤ In the ContentView Live Preview, tap a page number to navigate to that exercise page. Tap different symbols to see the colors change:

➤ Navigate to other exercise pages and set their ratings, then navigate through the pages to see the ratings are still the values you set.

➤ Click the pin button to unpin the ContentView preview.

Showing & Hiding Modal Sheets

Skills you’ll learn in this section: more practice with @State and @Binding; using a Boolean flag to show a modal sheet; dismissing a modal sheet by toggling the Boolean flag or by using @Environment(\.dismiss)

HistoryView and SuccessView are modal sheets that slide up over WelcomeView or ExerciseView. You dismiss the modal sheet by tapping its circled-x or Continue button, or by dragging it down.

Showing a Modal With a Binding

One way to show or hide a modal sheet is with a Boolean flag.

➤ In WelcomeView.swift, add this State property to WelcomeView:

@State private var showHistory = false

When this view loads, it doesn’t show HistoryView.

➤ Replace Button("History") { } with the following:

Button("History") {
  showHistory.toggle()
}
.sheet(isPresented: $showHistory) {
  HistoryView(showHistory: $showHistory)
}

Tapping the History button toggles the value of showHistory from false to true. This causes the sheet modifier to present HistoryView. You pass a binding $showHistory to HistoryView so it can change this value back to false when the user dismisses HistoryView.

➤ You’ll edit HistoryView to do this soon. But first, repeat the steps above in ExerciseView.swift.

Hiding a Modal With a Binding

There are actually two ways to dismiss a modal sheet. This way is the easiest to understand. You set a flag to true to show the sheet, so you set the flag to false to hide it.

➤ In HistoryView.swift, add this property:

@Binding var showHistory: Bool

This matches the argument you passed to HistoryView from WelcomeView.

➤ Add this new parameter in previews:

HistoryView(showHistory: .constant(true))

➤ Now replace Button(action: {}) { with the following:

Button(action: { showHistory.toggle() }) {

You toggle showHistory back to false, so HistoryView goes away.

➤ Go back to WelcomeView.swift and, in Live Preview, tap History:

HistoryView slides up over WelcomeView, as it should but, when HistoryView displays as a modal sheet, its dismiss button is too close to the top edge.

➤ Pin the WelcomeView preview, then go to HistoryView and fix the button padding:

Button(action: { showHistory.toggle() }) {
  Image(systemName: "xmark.circle")
}
.font(.title)
.padding()  // delete .trailing

➤ That’s better! Now, tap the dismiss button to hide it. You can also drag down on HistoryView. Unpin the WelcomeView preview.

➤ Also check the History button in ExerciseView.swift:

Your app has another modal sheet to show and hide. You’ll show it the same way as HistoryView, but you’ll use a different way to hide it.

Showing a Modal Without a Binding

In ExerciseView.swift, you’ll modify the action of the Done button so when the user taps it on the last exercise, it displays SuccessView.

➤ First, add the @State property:

@State private var showSuccess = false

➤ Then, in the doneButton closure, replace the Done button action with an if-else statement:

Button("Done") {
  if lastExercise {
    showSuccess.toggle()
  } else {
    selectedTab += 1
  }
}

➤ Finally, in the HStack, add this modifier to doneButton:

.sheet(isPresented: $showSuccess) {
  SuccessView()
}

Notice you don’t pass $showSuccess to SuccessView(). You’re going to use a different way to dismiss SuccessView. And the first difference is that it won’t use the Boolean flag.

Dismissing a Modal Sheet With dismiss

The internal workings of this way are complex, but it simplifies your code because you don’t need to pass a parameter to the modal sheet. And you can use exactly the same two lines of code in every modal view.

➤ In SuccessView.swift, add this property to SuccessView:

@Environment(\.dismiss) var dismiss

@Environment(\.dismiss) gives read access to the environment variable referenced by the key path \.dismiss.

Every view’s environment has properties like colorScheme, locale and the device’s accessibility settings. Many of these are inherited from the app, but a view’s dismiss is specific to the view. It’s the instance for the current Environment of the DismissAction structure. This structure has a callAsFunction method, but you don’t call it directly. Instead, you use “syntactic sugar”.

➤ In SuccessView.swift, replace Button("Continue") { } with the following:

Button("Continue") {
  dismiss()
}

You “call” the dismiss structure, and SwiftUI then calls its callAsFunction method. This method isn’t a toggle. It dismisses the view if it’s currently presented. It does nothing if the view isn’t currently presented.

➤ Go back to ExerciseView.swift and change the line in previews to the following:

ExerciseView(selectedTab: .constant(3), index: 3)

To test showing and hiding SuccessView, you’ll preview the last exercise page.

➤ In Live Preview, previewing Sun Salute, tap Done:

There’s a lot of empty space above and below the message. You can’t change this on an iPad, but you’ll soon see how to reduce the height in iOS.

➤ Tap Continue to dismiss SuccessView.

Showing Shorter Modal Sheets

➤ Change the run destination to iPhone 14 Pro. In ExerciseView.swift, add this modifier to SuccessView() inside body:

.presentationDetents([.medium, .large])

You’re telling SwiftUI to support two sheet sizes — .medium (about half height) and .large (full height). You can also specify .fraction or .height values.

➤ Make sure you’re still in ExerciseView.swift. In Live Preview, previewing Sun Salute, tap Done:

You see the half-height sheet with a resize handle to adjust the sheet to full height.

One More Thing

The High Five! message of SuccessView gives your user a sense of accomplishment. Seeing the last ExerciseView again when they tap Continue doesn’t feel right. Wouldn’t it be better to see the welcome page again?

➤ In SuccessView.swift, add this property:

@Binding var selectedTab: Int

SuccessView needs to be able to change this value, so it’s a binding.

➤ Also add it in previews:

SuccessView(selectedTab: .constant(3))

➤ And add this line to the Continue button action:

selectedTab = 9

WelcomeView has tag value 9.

Note: You can add it either above or below the dismiss call, but adding it above feels more like the right order of things.

Now back to ExerciseView.swift to pass this parameter to SuccessView.

➤ Change SuccessView() to this line:

SuccessView(selectedTab: $selectedTab)

➤ And finally, back to ContentView.swift to see it work. Run live preview, tap the page 4 button, tap Done, then tap Continue:

Note: If you don’t see the welcome page, press Command-B to rebuild the app, then try again.

Tapping Continue on SuccessView displays WelcomeView and dismisses SuccessView.

You’ve used a Boolean flag to show modal sheets. And you’ve used the Boolean flag and the environment variable .\dismiss to dismiss the sheets.

In this chapter, you’ve used view values to navigate your app’s views and show modal sheets. In the next chapter, you’ll observe objects: You’ll use a TimeLineView and rework HistoryStore as an ObservableObject.

Key Points

• Declarative app development means you declare both how you want the views in your UI to look and also what data they depend on. The SwiftUI framework takes care of creating views when they should appear and updating them whenever there’s a change to data they depend on.
• Data access = dependency: Reading a piece of data in your view creates a dependency for that data in that view.
• Single source of truth: Every piece of data has a source of truth, internal or external. Regardless of where the source of truth lies, you should always have a single source of truth.
• Property wrappers augment the behavior of properties: @State, @Binding and @EnvironmentObject declare a view’s dependency on the data represented by the property.
• @Binding declares dependency on a @State property owned by another view. @EnvironmentObject declares dependency on some shared data, like a reference type that conforms to ObservableObject.
• Use Boolean @State properties to show and hide modal sheets or subviews. Use @Environment(\.dismiss) as another way to dismiss a modal sheet.