In SwiftUI, supporting iOS 14 and above, how do I get a ScrollView child view to ignore the safe area

Question

I have a VStack that contains a Rectangle. The Rectangle has an edgesIgnoresSafeArea(.top) view modifier on it to extend it through the top safe area.

import SwiftUI

struct ScrollViewSafeArea: View {
    var body: some View {
        ScrollView {
            VStack {
                Rectangle()
                    .fill(Color.orange)
                    .frame(height: 200)
                    .edgesIgnoringSafeArea(.top)

                Spacer()
            }
        }
        .background(Color.green.ignoresSafeArea())
    }
}

Nice!

However, when I embed this inside a ScrollView, the Rectangle no longer extends through the safe area.

import SwiftUI

struct ScrollViewSafeArea: View {
    var body: some View {
        ScrollView {
            VStack {
                Rectangle()
                    .fill(Color.orange)
                    .frame(height: 200)
                    .edgesIgnoringSafeArea(.top)

                Spacer()
            }
        }
        .background(Color.green.ignoresSafeArea())
    }
}

I can add a negative top padding to the Rectangle to extend it through the safe area, but this feels hacky to me.

Does anyone have a better way?

That is likely not a safe area, that is likely a double `NavigationView` — lorem ipsum, Sep 02 '22 at 18:31
Thanks for the quick response. I posted the code in its entirety; there isn't a single NavigationView in it. If one or two are there, I would like to know how they got there and is there a way to remove them? — FStrout, Sep 02 '22 at 23:20

score 0 · Answer 1 · answered Sep 06 '22 at 14:29

So I figured it out. I feel kind-of stupid actually. I wasn't ignoring the safe areas properly. Here is the code that does what I want it to do.

import SwiftUI

struct ScrollViewSafeArea: View {
    var body: some View {
        ScrollView {
            VStack {
                Rectangle()
                    .fill(Color.orange)
                    .frame(height: 200)

                Spacer()
            }
        }
        .ignoresSafeArea()

        // Need to ignoreSafeArea again on the background color so
        // the color extends to the horizontal edges in landscape.
        .background(Color.green.ignoresSafeArea())
    }
}

struct ScrollViewSafeArea_Previews: PreviewProvider {
    static var previews: some View {
        ScrollViewSafeArea()
    }
}

In SwiftUI, supporting iOS 14 and above, how do I get a ScrollView child view to ignore the safe area

1 Answers1