Passing Data in SwiftUI
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Welcome to the video demo for “Implementing Data Passing Techniques in SwiftUI”. In this demo, you’ll build the version of the budget tracking app you saw in Lesson 1’s video demo.
Step 1: Create the ContentView
First, you’ll create a new SwiftUI view called ContentView. This view will display our list of financial entries.
struct ContentView: View {
var body: some View {
Text("Placeholder")
}
}
struct ContentView: View {
let entries: [FinancialEntry]
var body: some View {
Text("Placeholder")
}
}
Step 2: Display ContentView in the App
Next, add the ContentView to the app’s WindowGroup in the body property of the BudgetTrackerApp struct. To do this, add ContentView(entries: entries) inside the WindowGroup braces, passing the entries array to the ContentView.
@main
struct BudgetTrackerApp: App {
// ...
var body: some Scene {
WindowGroup {
ContentView(entries: entries)
}
}
}
Step 3: Add a List to ContentView
Now, you’ll replace the placeholder Text view in ContentView with a List that iterates over the entries array. To do this, inside the body property of ContentView, replace the Text("Placeholder") with a List taking the entries array and an empty trailing closure as parameters, just like the example below. This creates a List that iterates over the entries array.
struct ContentView: View {
// ...
var body: some View {
List(entries) { entry in
}
}
}
struct ContentView: View {
// ...
var body: some View {
List(entries) { entry in
Text("$\(entry.amount, specifier: "%.2f")")
}
}
}
Step 4: Add a NavigationView
To give the app a more polished look, add a NavigationView and a navigation title. To do this, wrap the List in NavigationView { } and then add .navigationTitle("Budget Tracker") to the List.
struct ContentView: View {
// ...
var body: some View {
NavigationView {
List(entries) { entry in
Text("$\(entry.amount, specifier: "%.2f")")
}
.navigationTitle("Budget Tracker")
}
}
}
Step 5: Create a Custom Row View
To display more information about each entry, create a custom row view called FinancialEntryRow.
struct FinancialEntryRow: View {
let entry: FinancialEntry
}
struct FinancialEntryRow: View {
// ...
var body: some View {
HStack {
}
}
}
struct FinancialEntryRow: View {
// ...
var body: some View {
HStack {
Text(entry.isExpense ? "Expense" : "Income")
}
}
}
struct FinancialEntryRow: View {
// ...
var body: some View {
HStack {
Text(entry.isExpense ? "Expense" : "Income")
Spacer()
}
}
}
struct FinancialEntryRow: View {
// ...
var body: some View {
HStack {
Text(entry.isExpense ? "Expense" : "Income")
Spacer()
Text("$\(entry.amount, specifier: "%.2f")")
.foregroundColor(entry.isExpense ? .red : .green)
}
}
}
Step 6: Use FinancialEntryRow in the List
Finally, use FinancialEntryRow in the List in ContentView to display each entry. To do this, replace Text("$\(entry.amount, specifier: "%.2f")") in the List with FinancialEntryRow(entry: entry).
struct ContentView: View {
// ...
var body: some View {
NavigationView {
List(entries) { entry in
FinancialEntryRow(entry: entry)
}
// ...
}
}
}
Wrapping Up
This lesson has provided the following key learnings: