@Published properties in iOS Swift - Mini App: Build & Ship

Build: Counter Screen

A simple screen that shows a number and a button to increase it. The number updates automatically using @Published property.

Target UI

-------------------
|   Counter: 0    |
|                 |
|   [ Increase ]  |
-------------------

Use a ViewModel class with an @Published integer property called count.

Display the current count in a Text view.

Add a button labeled 'Increase' that increments the count by 1 when tapped.

The UI should update automatically when count changes.

Starter Code

iOS Swift

import SwiftUI

class CounterViewModel: ObservableObject {
    // TODO: Add @Published property here
}

struct CounterView: View {
    @StateObject private var viewModel = CounterViewModel()

    var body: some View {
        VStack(spacing: 20) {
            // TODO: Display count here
            // TODO: Add Increase button here
        }
        .padding()
    }
}

struct CounterView_Previews: PreviewProvider {
    static var previews: some View {
        CounterView()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

class CounterViewModel: ObservableObject {
    @Published var count = 0
}

struct CounterView: View {
    @StateObject private var viewModel = CounterViewModel()

    var body: some View {
        VStack(spacing: 20) {
            Text("Counter: \(viewModel.count)")
                .font(.largeTitle)
                .accessibilityLabel("Current count")
            Button("Increase") {
                viewModel.count += 1
            }
            .buttonStyle(.borderedProminent)
            .accessibilityLabel("Increase count button")
        }
        .padding()
    }
}

struct CounterView_Previews: PreviewProvider {
    static var previews: some View {
        CounterView()
    }
}

We created a CounterViewModel class that conforms to ObservableObject. Inside it, the @Published property count holds the current number. When count changes, SwiftUI automatically updates any views observing it.

In CounterView, we use @StateObject to keep an instance of the view model. The Text view shows the current count by reading viewModel.count. The Button increments count when tapped.

This setup makes the UI update automatically without manual refresh calls, demonstrating the power of @Published properties in SwiftUI.

Final Result

Completed Screen

-------------------
|   Counter: 0    |
|                 |
|   [ Increase ]  |
-------------------

Tapping the 'Increase' button adds 1 to the counter number.

The displayed number updates immediately after tapping.

Stretch Goal

Add a 'Reset' button that sets the count back to zero.

💡 Hint

Add another Button below the 'Increase' button that sets viewModel.count = 0 when tapped.

Practice

1. What is the main purpose of marking a property with @Published in SwiftUI?

easy

A. To make the property constant

B. To make the property private

C. To automatically notify views when the property changes

D. To prevent the property from being saved

Solution

1. Step 1: Understand @Published role

   @Published marks a property to send updates when its value changes.

2. Step 2: Connect to UI updates

   This automatic notification helps SwiftUI views update when data changes.

3. Final Answer:

   To automatically notify views when the property changes -> Option C

4. Quick Check:

   @Published = automatic update notification [OK]

Hint: Remember: @Published means auto-update UI on change [OK]

Common Mistakes:

• Thinking @Published makes property private
• Confusing @Published with constant declaration
• Assuming @Published saves data permanently

2. Which of the following is the correct way to declare a @Published property inside an ObservableObject class?

easy

A. struct Model: ObservableObject { @Published var count: Int = 0 }

B. class Model: ObservableObject { @Published var count: Int = 0 }

C. class Model { @Published var count: Int = 0 }

D. class Model: ObservableObject { var count: @Published Int = 0 }

Solution

1. Step 1: Check class and ObservableObject conformance

   @Published must be inside a class conforming to ObservableObject, so class Model: ObservableObject is correct.

2. Step 2: Verify property declaration syntax

   The correct syntax is @Published var count: Int = 0, not var count: @Published Int.

3. Final Answer:

   class Model: ObservableObject { @Published var count: Int = 0 } -> Option B

4. Quick Check:

   Correct syntax = class Model: ObservableObject { @Published var count: Int = 0 } [OK]

Hint: Remember: @Published goes before var inside ObservableObject class [OK]

Common Mistakes:

• Using struct instead of class for ObservableObject
• Placing @Published after the type
• Not conforming class to ObservableObject

3. Given the code below, what will be printed when model.count = 5 is executed?

class Model: ObservableObject {
  @Published var count: Int = 0
}

let model = Model()
model.$count.sink { print("Count changed to \($0)") }

medium

A. Count changed to 5

B. Count changed to 0

C. No output

D. Compile error

Solution

1. Step 1: Understand @Published publisher

   @Published creates a publisher accessible via $property, here $count, which emits new values on change.

2. Step 2: Analyze sink subscription and assignment

   The sink closure prints the new value when count changes. Setting model.count = 5 triggers the print with 5.

3. Final Answer:

   Count changed to 5 -> Option A

4. Quick Check:

   @Published publishes new values = Count changed to 5 [OK]

Hint: Remember: $property publishes changes, sink prints new value [OK]

Common Mistakes:

• Expecting output before assignment
• Confusing $count with count
• Thinking no output without explicit call

4. Identify the error in this code snippet:

class Model: ObservableObject {
  @Published var name: String

  init() {
    name = ""
  }
}

let model = Model()
model.name = "Alice"

medium

A. Missing initial value for @Published property

B. ObservableObject conformance is missing

C. Cannot assign to @Published property outside class

D. No error, code works fine

Solution

1. Step 1: Check @Published property initialization

   The property name is initialized in init(), which is valid for non-optional properties.

2. Step 2: Verify ObservableObject conformance and usage

   Class conforms to ObservableObject and property is assigned outside class, which is allowed.

3. Final Answer:

   No error, code works fine -> Option A

4. Quick Check:

   Proper init and conformance = No error, code works fine [OK]

Hint: Remember: @Published properties can be initialized in init() [OK]

Common Mistakes:

• Assuming @Published needs default value inline
• Thinking ObservableObject conformance is missing
• Believing external assignment is disallowed

5. You want to create a SwiftUI app where a @Published property updates a label text automatically. Which of the following is the best way to connect the @Published property to the UI?

hard

A. Use @EnvironmentObject without passing the object

B. Use @State in the view for the property

C. Manually call setNeedsDisplay() after changing the property

D. Use @ObservedObject in the view to watch the ObservableObject

Solution

1. Step 1: Understand property wrappers for UI updates

   @Published properties notify changes, but the view must observe the object using @ObservedObject to update UI automatically.

2. Step 2: Evaluate other options

   @State is for local view state, not external objects; setNeedsDisplay() is UIKit, not SwiftUI; @EnvironmentObject requires injection.

3. Final Answer:

   Use @ObservedObject in the view to watch the ObservableObject -> Option D

4. Quick Check:

   @Published + @ObservedObject = auto UI update [OK]

Hint: Connect @Published with @ObservedObject in views [OK]

Common Mistakes:

• Using @State instead of @ObservedObject for external data
• Trying manual UI refresh calls in SwiftUI
• Using @EnvironmentObject without proper injection