Safe area is very confusing in SwiftUI. Can someone help me to understand how it works?
Below are some points which creates confusion please correct whether its true or not.
Case: 1 This keeps the transparent top and bottom edges and uncommenting the .background also applies color to the edges. Looks like it has ignored the edges but text is not moved up. So, edges still exist.
ZStack() {
// background
Color.red
// foreground
ScrollView {
Text("Section - 1")
.font(.title)
.foregroundColor(.white)
.frame(maxWidth: .infinity, alignment: .leading)
.padding()
.background(.blue)
ForEach(0..<10) { _ in
RoundedRectangle(cornerRadius: 16)
.fill(.white)
.frame(height: 150)
.shadow(radius: 20)
.padding(.horizontal)
.padding(.vertical, 8)
}
}
//.background(.yellow) //It also applies color to the edges but doesn't ignore the edges
Case: 2 It still has the safe area because content is not moving to the top edges but this time on scrolling its not transparent and edges are not visible.
ScrollView {
Text("Section - 1")
.font(.title)
.foregroundColor(.white)
.frame(maxWidth: .infinity, alignment: .leading)
.padding()
.background(.blue)
ForEach(0..<10) { _ in
RoundedRectangle(cornerRadius: 16)
.fill(.white)
.frame(height: 150)
.shadow(radius: 20)
.padding(.horizontal)
.padding(.vertical, 8)
}
}
.background(.red) // IT APPLIES TO WHOLE SCREEN INCLUDING EDGES
// WAYS- OF IGNORING SAFE AREA
// .ignoresSafeArea()
// .edgesIgnoringSafeArea([.top, .bottom])
Case: 3 Use background to handle edges.
ScrollView {
VStack(spacing: 16) {
Text("Section - 1")
.font(.title)
.foregroundColor(.white)
.frame(maxWidth: .infinity, alignment: .leading)
.padding()
.background(.blue)
ForEach(0..<10) { _ in
Text("Hello, World")
.frame(maxWidth: .infinity, minHeight: 150)
.background(.red)
}
}
.background(.yellow)
}
// .background(.green) // gives color to the edges
// .background(.green, ignoresSafeAreaEdges: []) // keeps all edges default white & gives color to the edges
.background(.green, ignoresSafeAreaEdges: [.top]) // ignores specific edges & gives color to the edges
Can anyone conclude the optimized way and edge cases that we must ignore while using the safe areas in SwiftUI?
