SwiftUI: ignoreSafeArea causing extra whitespace in View - swift

Question

I'm just learning how to use SwiftUI and seem to be having an issue with the ignoreSafeArea() call on a view.
This is my original View:
But when I add ignoreSafeArea to the View it causes strange whitespace errors:
Here is the code I'm using for the main view.
var body: some View {
VStack {
Image("Banner")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(height: self.show ? 120 : 70, alignment: .bottomLeading)
.blur(radius: self.show ? 0 : 2)
.clipped()
.ignoresSafeArea()
HStack {
VStack(alignment: .leading) {
Text(user.name)
.font(.title)
HStack {
Text(user.screenName)
.font(.subheadline)
.foregroundColor(.secondary)
Spacer()
}
}
Spacer()
UserImage(user: user, show: self.$show)
}
.padding()
if self.show {
Divider()
HStack {
Text(user.userDetailsDescription)
.font(.subheadline.weight(.light))
Spacer()
}.padding(.leading)
}
}
}

Answer 1

You should apply the modifier to the VStack instead, so it doesn't just affect Image("Banner").
Change this:
VStack {
Image("Banner")
/* ... */
.ignoresSafeArea()
/* ... */
}
To this:
VStack {
Image("Banner")
/* ... */
/* ... */
}
.ignoresSafeArea(edges: .top)
Incorrect code
Correct code

Answer 2

Alternatively, you could replace the Image with a placeholder space (Color.clear). Then, put the Image inside .background(). This way, the image's frame won't affect any other spacing.
struct ContentView: View {
let show = true
var body: some View {
VStack {
/// placeholder
Color.clear
.frame(height: self.show ? 120 : 70)
.background(
Image("Banner")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(alignment: .bottomLeading)
.blur(radius: self.show ? 0 : 2)
.ignoresSafeArea() /// ignoresSafeArea inside `.background`
)
HStack {
VStack(alignment: .leading) {
Text("User name")
.font(.title)
HStack {
Text("User screen name")
.font(.subheadline)
.foregroundColor(.secondary)
Spacer()
}
}
Spacer()
Circle()
.fill(Color.green)
.frame(width: 100, height: 100)
.offset(x: 0, y: -50)
}
.padding()
if self.show {
Divider()
HStack {
Text("Description")
.font(.subheadline.weight(.light))
Spacer()
}.padding(.leading)
}
Spacer()
}
}
}
Result: