Pocket Budget has a store, a row view and state that drives the screen. Now it needs to become an app people can use: a list of this month’s expenses, a tap that opens the details, and a plus button that opens a form. Those three patterns (list, push navigation and modal form) make up the skeleton of most iPhone apps you’ve used.
\nimport SwiftUI\n\nstruct ExpensesScreen: View {\n let store: BudgetStore\n @State private var isAdding = false\n\n var body: some View {\n NavigationStack {\n List {\n ForEach(store.expenses) { expense in\n NavigationLink(value: expense) {\n ExpenseRow(expense: expense)\n }\n }\n .onDelete { offsets in\n store.delete(at: offsets)\n }\n }\n .overlay {\n if store.expenses.isEmpty {\n ContentUnavailableView(\"No expenses yet\", systemImage: \"tray\",\n description: Text(\"Tap + to add your first one.\"))\n }\n }\n .navigationTitle(\"Expenses\")\n .navigationDestination(for: Expense.self) { expense in\n ExpenseDetail(expense: expense)\n }\n .toolbar {\n Button(\"Add expense\", systemImage: \"plus\") {\n isAdding = true\n }\n }\n .sheet(isPresented: $isAdding) {\n AddExpenseView(store: store)\n }\n }\n }\n}That’s the whole main screen; take it one piece at a time. ForEach(store.expenses) produces a row per expense. It needs a stable identity for each element so that, when an expense is inserted or deleted, SwiftUI animates the right row instead of redrawing everything, and that identity is the id that Identifiable requires. .onDelete adds swipe-to-delete and hands you the positions to remove; the store’s delete(at:) is one line, expenses.remove(atOffsets: offsets). That method is defined in SwiftUI, so BudgetStore.swift needs import SwiftUI alongside Observation.
ContentUnavailableView is the system’s standard empty state. An empty list with no explanation looks broken; a short message and a hint at the next action looks finished.
NavigationStack manages a stack of screens: the list at the bottom, details pushed on top, and the system back button and swipe gesture for free.
Navigation is split into two halves. NavigationLink(value: expense) says what was tapped. .navigationDestination(for: Expense.self) says which screen shows an Expense. The value must be Hashable, which Expense already is. Keeping the two halves apart means the destination is declared once, however many places link to an expense, and it makes programmatic navigation possible:
@State private var path: [Expense] = []\n\n// In body:\nNavigationStack(path: $path) {\n // …the same List and modifiers as above\n}\n\n// Anywhere in this view, for example after saving:\npath.append(newExpense) // pushes ExpenseDetail\npath.removeAll() // pops back to the listThe path is plain state, so navigation becomes data you can inspect, test and change from code. That’s how you’d open a specific expense from a notification, or jump back to the root after a multi-step flow. For screens with mixed destination types, NavigationPath plays the same role with type-erased values.
The detail screen can be a Form used for display, with LabeledContent rows that format values for you:
struct ExpenseDetail: View {\n let expense: Expense\n\n var body: some View {\n Form {\n LabeledContent(\"Amount\", value: expense.amount, format: .currency(code: \"USD\"))\n LabeledContent(\"Category\", value: expense.category.title)\n LabeledContent(\"Date\", value: expense.date, format: .dateTime.day().month().year())\n }\n .navigationTitle(expense.title)\n }\n}Pushing is for drilling into content. A sheet is for a self-contained task the user finishes or abandons, like adding an expense. .sheet(isPresented: $isAdding) shows the form whenever isAdding becomes true. Here’s the form:
struct AddExpenseView: View {\n let store: BudgetStore\n @Environment(\\.dismiss) private var dismiss\n\n @State private var title = \"\"\n @State private var amount: Decimal?\n @State private var category: Category = .food\n @State private var date = Date.now\n\n private var canSave: Bool {\n !title.trimmingCharacters(in: .whitespaces).isEmpty && (amount ?? 0) > 0\n }\n\n var body: some View {\n NavigationStack {\n Form {\n Section(\"Details\") {\n TextField(\"Title\", text: $title)\n TextField(\"Amount\", value: $amount, format: .currency(code: \"USD\"))\n .keyboardType(.decimalPad)\n }\n Section {\n Picker(\"Category\", selection: $category) {\n ForEach(Category.allCases, id: \\.self) { category in\n Label(category.title, systemImage: category.symbolName)\n .tag(category)\n }\n }\n DatePicker(\"Date\", selection: $date, in: ...Date.now, displayedComponents: .date)\n }\n }\n .navigationTitle(\"New Expense\")\n .navigationBarTitleDisplayMode(.inline)\n .toolbar {\n ToolbarItem(placement: .cancellationAction) {\n Button(\"Cancel\") { dismiss() }\n }\n ToolbarItem(placement: .confirmationAction) {\n Button(\"Save\") {\n guard let amount else { return }\n store.add(Expense(title: title, amount: amount, category: category, date: date))\n dismiss()\n }\n .disabled(!canSave)\n }\n }\n }\n }\n}The sheet wraps its form in its own NavigationStack. A sheet is a separate presentation that doesn’t inherit the list’s stack, and without one there’s no bar to hold the title or the Cancel and Save buttons. Placing them with .cancellationAction and .confirmationAction puts them where iOS users expect.
Each field binds to its own @State, so the form is a draft: nothing touches the store until Save. Cancel throws the draft away. That’s value semantics paying off again.
The amount field is the important one. TextField(value:format:) parses what the user types using their locale, so “12,50” in Germany becomes 12.5, and amount only ever holds a successfully parsed number, or nil while there isn’t one. This replaces the lenient Decimal(string:) parsing from the optionals lesson. guard let amount in the Save action unwraps it, and canSave disables the button until both title and amount make sense, so invalid input can’t be saved at all. The in: ...Date.now range stops future dates. dismiss comes from the environment and closes whatever presented this view.
Pocket Budget is now a working app with a real flow from list to detail to form. It forgets everything when you quit, though, and it knows nothing beyond the phone. The final section fixes both, starting with how Swift runs work that takes time.
\n","toc":[{"id":"sec-1","text":"A list of identifiable rows","level":2},{"id":"sec-2","text":"Navigation with values","level":2},{"id":"sec-3","text":"A form in a sheet","level":2}],"takeaways":["List and ForEach need to tell rows apart, which is why your models conform to Identifiable.","NavigationLink(value:) plus .navigationDestination(for:) separates what was tapped from which screen shows it.","Use a sheet for a self-contained task such as adding an expense, and dismiss it with the dismiss environment value.","A TextField with a format: turns typing into a typed value using the user’s locale, instead of hand-parsing strings.","A Picker’s .tag values must have exactly the same type as its selection, or the picker silently stops working."],"further":[{"title":"NavigationStack","url":"https://developer.apple.com/documentation/swiftui/navigationstack"},{"title":"Lists","url":"https://developer.apple.com/documentation/swiftui/lists"},{"title":"Form","url":"https://developer.apple.com/documentation/swiftui/form"}],"quiz":[{"q":"You write NavigationLink(value: expense) but tapping a row does nothing. What’s the most likely cause?
.navigationDestination(for: Expense.self) inside the NavigationStack.","why":"Correct. A value link only says what was selected; the destination modifier decides what to show for it."},{"text":"Expense doesn’t conform to Codable.","why":"Navigation values must be Hashable, not Codable. Codable only matters if you save the path."},{"text":"The row needs an .onTapGesture.","why":"NavigationLink handles the tap itself; adding a gesture can actually block it."}],"answer":0},{"q":"The category picker uses selection: $category where category is a Category, and its rows are tagged with .tag(category.rawValue). What happens?
String never equals a Category."},{"text":"The picker shows, but choosing a row never changes the selection.","why":"Correct. The tags are Strings and the selection is a Category, so nothing matches. Tag with the enum value itself."},{"text":"The build fails with a type error.","why":".tag accepts any Hashable value, so this compiles and fails quietly at runtime, which makes it nasty."}],"answer":1},{"q":"Why bind the amount field to a Decimal? with format: .currency(code: "USD") instead of a String?
TextField.","why":"TextField("Title", text: $title) is the most common text field there is."},{"text":"It makes the keyboard numeric automatically.","why":"The format doesn’t change the keyboard; that’s what .keyboardType(.decimalPad) is for."},{"text":"The field parses the user’s input with their locale and hands you a typed Decimal, so there’s no string to parse.","why":"Correct. “12,50” in Germany becomes 12.5, and you never write a parser yourself."}],"answer":2}],"exercise":{"kind":"fill","language":"swift","template":"NavigationStack {\n List(store.expenses) { expense in\n NavigationLink({{0}}: expense) {\n ExpenseRow(expense: expense)\n }\n }\n .navigationTitle(\"Expenses\")\n .{{1}}(for: Expense.self) { expense in\n ExpenseDetail(expense: expense)\n }\n .toolbar {\n Button(\"Add expense\", systemImage: \"plus\") { isAdding = true }\n }\n .{{2}}(isPresented: $isAdding) {\n AddExpenseView(store: store)\n }\n}","blanks":[{"answers":["value"]},{"answers":["navigationDestination"]},{"answers":["sheet"]}],"title":"Wire up the main screen","prompt":"Complete Pocket Budget’s main screen. Tapping a row must push ExpenseDetail for that expense using value-based navigation, and the plus button must present AddExpenseView modally while isAdding is true.
for:.","The modifier that presents a modal card over the current screen has a one-word name."],"explanation":"NavigationLink(value: expense) only records which expense was tapped. .navigationDestination(for: Expense.self) tells the enclosing NavigationStack what to show for any Expense value, so the two work as a pair; without the destination, taps do nothing. .sheet(isPresented: $isAdding) presents the form whenever isAdding becomes true, and sets it back to false when the sheet is dismissed.
NavigationLink(value: expense) { … }\n.navigationDestination(for: Expense.self) { … }\n.sheet(isPresented: $isAdding) { … }