Model definition with @Model in iOS Swift - Mini App: Build & Ship

Build: User Profile Screen

This screen shows a user's profile information using a model defined with @Model. It displays the user's name and age.

Target UI

-------------------------
|      User Profile      |
|-----------------------|
| Name:                 |
|                       |
| Age:                  |
|                       |
|                       |
|                       |
-------------------------

Define a User model using @Model with properties: name (String) and age (Int).

Create a SwiftUI view that shows the user's name and age.

Initialize the User model with sample data and display it on the screen.

Starter Code

iOS Swift

import SwiftUI
import SwiftData

// TODO: Define the User model here using @Model

struct UserProfileView: View {
    // TODO: Create a @StateObject or @ObservedObject for User model

    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("Name:")
            Text("") // TODO: Show user's name here
            Text("Age:")
            Text("") // TODO: Show user's age here
            Spacer()
        }
        .padding()
        .navigationTitle("User Profile")
    }
}

struct UserProfileView_Previews: PreviewProvider {
    static var previews: some View {
        UserProfileView()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI
import SwiftData

@Model
class User {
    var name: String
    var age: Int

    init(name: String, age: Int) {
        self.name = name
        self.age = age
    }
}

struct UserProfileView: View {
    @StateObject private var user = User(name: "Alice", age: 30)

    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("Name:")
                .font(.headline)
            Text(user.name)
                .font(.title2)
            Text("Age:")
                .font(.headline)
            Text(String(user.age))
                .font(.title2)
            Spacer()
        }
        .padding()
        .navigationTitle("User Profile")
    }
}

struct UserProfileView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            UserProfileView()
        }
    }
}

We define the User model class with the @Model attribute from SwiftData. This tells Swift that this class is a data model suitable for persistence and observation.

The User class has two properties: name (a String) and age (an Int), initialized via the constructor.

In the UserProfileView, we create a @StateObject instance of User with sample data (name "Alice" and age 30). This allows the view to observe changes to the model.

The view displays the user's name and age using Text views with some styling for clarity.

Wrapping the preview in a NavigationView shows the navigation title properly.

Final Result

Completed Screen

-------------------------
|      User Profile      |
|-----------------------|
| Name:                 |
| Alice                 |
| Age:                  |
| 30                    |
|                       |
|                       |
-------------------------

The screen shows the user's name and age clearly.

No interactive elements on this screen; it is a simple display.

If the user model changes, the UI would update automatically.

Stretch Goal

Add a button to increase the user's age by 1 when tapped.

💡 Hint

Add a Button below the age text that updates the user.age property inside an action closure.