How can I use edgesIgnoringSafeArea in SwiftUI, but make a child view respect the safe area?

Solution 1:

Whatever view you draw in the background modifier will use the frame of the view it's modifying. So you need to tell THAT view to ignore the safe area.

.background(Color.blue.edgesIgnoringSafeArea(.bottom))

Solution 2:

You can access the height of the safe area using a GeometryReader. Then you could use the height of the safe area as bottom padding or offset on your button.
https://developer.apple.com/documentation/swiftui/geometryproxy

struct ContentView: View {
    var body: some View {

        GeometryReader { proxy in
            ZStack(alignment: .bottom) {

                List {
                    Text("Item 1")
                    Text("Item 2")
                    Text("Item 3")
                }

                HStack {
                    Spacer()
                    Button(action: {
                        // do something
                    }){
                        Text("Button")
                            .font(.title)
                            .padding()
                            .background(Color.green)
                            .foregroundColor(.white)
                            .cornerRadius(15)
                    }
                    .padding(.bottom, proxy.safeAreaInsets.top)
                    Spacer()
                }.background(Color.blue)
            }.edgesIgnoringSafeArea(.bottom)
        }
    }
}

Solution 3:

edgesIgnoringSafeArea(_:) is Deprecated

use the following:

.background(Color.blue.ignoresSafeArea(edges: .bottom))

Solution 4:

Adding on to @Joe Susnick's answer, the full code is:

VStack {

}.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color(red: 0.357, green: 0.784, blue: 0.016, opacity: 0.5).ignoresSafeArea()
)

Anything inside of VStack respects the safe area whereas the background fills the whole screen.