I wanted to fix the UI glitch in my game Pluttifikation today, and realised I’d need to populate the Xcode preview with some mock data, unless I wanted to recompile the app for every change I made.
However, the problem is that I created a Player-class where all the properties that keep track of the players progress have a pre-configured value. On top of that, the PlayerView access’ Player as a subclass of the @Observable GameController-class that is injected in Environment.
The player’s progress – and name, if they choose to change it – is then saved to, and loaded from, UserDefaults. Simple and effective. The only thing I had to do to make the preview work was injecting the GameController like this:
#Preview {
PlayerView()
.environment(GameController())
}And then I got this lovely preview in Xcode, showing the apps state when it’s opened for the first time. No results, no progress and no player-name:
I needed to add some data, but how?
I knew that you can expand the #Preview macro by creating and returning custom structs and hoped that an init could be used to override the presets. That at least got the compiler to stop complaining, but instead the preview crashed, so not really a win.
I was almost ready to give up when I realised that if the preview is a simple View, the .onAppear-modifier should work just fine.
I tried this:
#Preview {
struct PreviewWrapper: View {
@Environment(GameController.self) var gc
var body: some View {
PlayerView(gameController: _gc)
.onAppear {
previewValues()
}
}
func previewValues() {
gc.player.name = "John Appleseed"
gc.player.scorePercentage = 0.75
gc.player.totalRounds = 330
...
}
}
return PreviewWrapper()
.environment(GameController())
}And got this:
In hindsight, recompiling the app for every change – or better yet, refactoring the Player-class to allow passing values on creation – would have saved me a lot of time. Especially since the glitch turned out to be caused by applying a shadow to a Gauge with a gradient.
But at least I’ve learned something. And if you’ve painted yourself in the same corner as I did and found this post trying to find a solution, you may have as well.
PS. After writing this post I figured I’d probably benefit from having some mock data for simulator as well, to take away some of the pain that comes with creating screen shots for App Store.
So I just added an #if DEBUG to the method that loads the user default, that simply overrides everything with default values. And of course, with that in place I can go back to using the default #Preview-macro with .environment-injection.
No refactoring required.
func load() {
self.name = defaults.string(forKey: Settings.name.rawValue) ?? "Spelare"
self.totalRounds = defaults.double(forKey: Settings.totalRounds.rawValue)
self.totalScore = defaults.double(forKey: Settings.totalScore.rawValue)
...
// This is just for AppStore-previews.
#if DEBUG
name = "John Appleseed"
scorePercentage = 0.75
totalRounds = 330
totalScore = 248
...
}
