Implementing Data Passing Techniques in SwiftUI

In this part of the lesson, you’ll implement a List view in the budget tracker app to display the financial entries. You’ll start by passing an array of financial-entry objects to the List. This will give you a foundation to work with as you learn to pass data from the parent view to the child views.

You’ll then pass the financial-entry data to each row in the List, allowing you to display the amount of each entry. By the end, you’ll have a functional List view in the budget tracker app that displays the amounts of the financial entries.

Opening the Starter Project

Before you start, make sure you have the starter Xcode project for this module. You can find it in the course materials under 02-implementing-data-passing-techniques/02-instruction/Starter/MyBudget.xcodeproj. Open the Xcode project and then open BudgetTrackerApp.swift to begin.

Passing Data to a List in SwiftUI

In SwiftUI, a List view is commonly used to display a data collection. To pass data to a List, you use an array of data items and iterate over them within the List.

Find ContentView‘s body and start by replacing EmptyView() with the following List. At this point, you’ll create the List structure but won’t yet populate it with rows.

struct ContentView: View {

  // ...

  var body: some View {
    List(entries) { entry in

    }
  }
}

In this example, the List is initialized with the entries array. In other words, you’re passing the entries array into the List view. This sets up the structure for the List to iterate over each FinancialEntry in the array and create a row for each entry.

Passing Data From a List to Child Views

Now that you’ve set up the List, it’s time to pass data from the List to its child views. Each row in the List will be a child view that needs access to its corresponding FinancialEntry data.

First, create a Text view for each row that displays the amount of the financial entry. To do this, use the trailing closure of the List constructor to access each entry and pass it to the Text view:

List(entries) { entry in
  Text("$\(entry.amount, specifier: "%.2f")")
}

In this code, the entry constant in the trailing closure of the List constructor refers to the current FinancialEntry being iterated over. This constant is used to populate the Text view with the correct amount for each entry.

Build and run the app.

You should see a list of financial entries with their respective amounts displayed. This is the result of passing data from the List to the Text view for each entry. However, at this point, the app’s users can’t distinguish between income and expenses because they’re all displayed in the same color. Let’s address this next.

Add a view modifier to the Text view to change its color based on whether the entry is an expense or income:

List(entries) { entry in
  Text("$\(entry.amount, specifier: "%.2f")")
    .foregroundColor(entry.isExpense ? .red : .green)
}

Build and run the app again.

Now, you should see that the Text view’s color changes to red for expenses and green for income, providing a clear visual distinction between the two types of entries. This addition further demonstrates the power of data passing in SwiftUI, allowing you to dynamically style your views based on the data they display.

Video Demo: Implementing Data Passing in the Budget Tracker App

To solidify your understanding of data passing in SwiftUI, the next section will feature a demo video. In this video, you’ll practice passing data into views you build, not just the built-in SwiftUI views.