Consider this 400x800 image:
I would expect the background image in the following code to fill the entire screen:
struct ContentView: View {
var body: some View {
VStack {
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background {
Image(.background)
.resizable()
.scaledToFill()
.ignoresSafeArea()
}
}
}
But there's a small gap in the bottom:
Swapping the order of scaledToFill and ignoresSafeArea fills this gap:
Image(.background)
.resizable()
.ignoresSafeArea()
.scaledToFill()
Why?
Ignoring specific edges is more problematic:
struct ContentView: View {
var body: some View {
VStack {
}
.statusBarHidden()
.frame(maxWidth: .infinity, maxHeight: .infinity)
.border(.black)
.background {
Image(.background)
.resizable()
.ignoresSafeArea(edges: .top)
.scaledToFill()
}
}
}
My solution here was to use the Image as an overlay of a Rectangle.
Rectangle()
.overlay {
Image(.background)
.resizable()
.scaledToFill()
}
.clipped()
.ignoresSafeArea(edges: .top)
Is there a better way to achieve this?
I wonder if someone from SwiftUI Team could help me to better undestand Image behavior regardless ignoresSafeArea.
Topic:
UI Frameworks
SubTopic:
SwiftUI