Within the earlier tutorial, I’ve walked you thru the fundamentals of SwiftData, a brand new framework launched in iOS 17 as a alternative for Core Knowledge. In case you have adopted that tutorial, it is best to now be conversant in utilizing SwiftData to save lots of and handle information in a database. The built-in @Mannequin macro and the @Question macro vastly simplify the method of defining information mannequin and retrieving data from the database, making it extraordinarily simple for builders to deal with persistent information.
The Preview characteristic in SwiftUI is very worthwhile because it permits builders to immediately visualize the app’s person interface with out the necessity to launch the simulator. Nevertheless, utilizing SwiftData with SwiftUI Preview requires some further steps. On this tutorial, we’ll discover the right way to combine SwiftData with SwiftUI Preview successfully.
Word: If you happen to haven’t learn the SwiftData tutorial, I extremely advocate checking it out first, as this tutorial references a few of the supplies lined in that tutorial.
Revisiting the Knowledge Mannequin and SwiftData
Within the earlier instance, we’ve constructed a mannequin class for ToDoItem like this:
|
import Basis import SwiftData  @Mannequin class ToDoItem: Identifiable {     var id: UUID     var title: String     var isComplete: Bool      init(id: UUID = UUID(), title: String = “”, isComplete: Bool = false) {         self.id = id         self.title = title         self.isComplete = isComplete     } } |
SwiftData simplifies the method of defining a schema utilizing code. You solely have to mark the mannequin class with the @Mannequin macro. SwiftData will then routinely allow persistence for the information class.
So as to drive the information operations (like replace, insert, learn, and delete), we additionally have to arrange the mannequin container. Within the ToDoDemoAppApp.swift, we’ve connected the modelContainer modifier like beneath:
|
struct ToDoDemoAppApp: App { Â Â Â Â var physique: some Scene { Â Â Â Â Â Â Â Â WindowGroup { Â Â Â Â Â Â Â Â Â Â Â Â ContentView() Â Â Â Â Â Â Â Â } Â Â Â Â Â Â Â Â .modelContainer(for: ToDoItem.self) Â Â Â Â } } |
This configuration is basically all you want earlier than beginning to work with SwiftData.
Preview with SwiftData and In-memory Container
Within the Todo app demo, we’ve a ContentView that masses and shows the to-do merchandise within the record view. Right here is the pattern code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
struct ContentView: View {     @Setting(.modelContext) personal var modelContext      @Question var todoItems: [ToDoItem]      var physique: some View {         NavigationStack {             Listing {                 ForEach(todoItems) { todoItem in                     HStack {                         Textual content(todoItem.title)                          Spacer()                          if todoItem.isComplete {                             Picture(systemName: “checkmark”)                         }                     }                 }             }              .navigationTitle(“To Do Listing”)         }     }     } |
You can also make the preview work by writing the preview code like this:
|
#Preview { Â Â Â Â ContentView() Â Â Â Â Â Â Â Â .modelContainer(for: ToDoItem.self) } |
Nevertheless, on this case, the preview solely shows an empty Todo record as a result of the container doesn’t have any information populated. If you happen to need to have some pattern information, you may create a customized mannequin container particularly for the preview. Right here is an instance:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@MainActor let previewContainer: ModelContainer = {     do {         let container = strive ModelContainer(for: ToDoItem.self,                                           configurations: .init(isStoredInMemoryOnly: true))          for _ in 1...10 {             container.mainContext.insert(generateRandomTodoItem())         }          return container     } catch {         fatalError(“Didn’t create container”)     } }()  func generateRandomTodoItem() –> ToDoItem {     let duties = [ “Buy groceries”, “Finish homework”, “Go for a run”, “Practice Yoga”, “Read a book”, “Write a blog post”, “Clean the house”, “Walk the dog”, “Attend a meeting” ]      let randomIndex = Int.random(in: 0..<duties.depend)     let randomTask = duties[randomIndex]      return ToDoItem(title: randomTask, isComplete: Bool.random()) } |
We instantiate a ModelContainer with an in-memory configuration and populate the container with 10 random to-do gadgets. To make use of this preview container, you merely modify the preview code and specify to make use of the previewContainer:
|
#Preview { Â Â Â Â ContentView() Â Â Â Â Â Â Â Â .modelContainer(previewContainer) } |
When you made the modification, the preview pane ought to present you the Todo record view with 10 random gadgets.
Abstract
SwiftUI Preview is a worthwhile characteristic that enables builders to visualise their app’s person interface immediately, with out the necessity to launch the simulator. This tutorial supplies complete steerage on successfully utilizing SwiftData with SwiftUI Preview. You need to learn to create a customized container populated with pattern information particularly for preview functions.
If you happen to get pleasure from studying this tutorial and wish to study extra about SwiftUI, don’t overlook to take a look at our Mastering SwiftUI e-book for iOS 17 and Xcode 15.
Founding father of AppCoda. Writer of a number of iOS programming books together with Starting iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Observe me at Fb, Twitter and Google+.