In my NavigationView '.edgesIgnoringSafeArea' does not move content past the safe area

Question

I would like it so that .edgesIgnoringSafeArea(.all) fits the content right onto the top of the canvas

I would like it to show like this: https://i.stack.imgur.com/RzrO6.png

Instead, it shows like this: https://i.stack.imgur.com/sbbaU.png

Content view:

TabView {
    NavigationView {
        MainContentView()
    }
...
}

Main content view:

var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            ...
        }
        .padding([.horizontal, .top])
        .navigationBarTitle("Title")
    }

Detailed view:

struct PostDetail: View {    
    var post: Post

    var body: some View {
        List {
            Image(post.imageName)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .listRowInsets(EdgeInsets())
            VStack(spacing: 20) {
                Text(post.name)
                    .foregroundColor(.primary)
                    .font(.largeTitle)
                    .fontWeight(.bold)
                Text(post.description)
                    .foregroundColor(.primary)
                    .font(.body)
                    .lineLimit(nil)
                    .lineSpacing(12)
                VStack {
                    HStack {
                        Spacer()
                        ViewMoreButton(post: post)
                        Spacer()
                    }
                }
            }
            .padding(.top)
            .padding(.bottom)
        }
        .edgesIgnoringSafeArea(.top) //Does nothing!
        .navigationBarHidden(true) // Does nothing!
    }
}

You'll have to post some code so that we may see what you might be doing wrong. — Kevin Renskers, Feb 09 '20 at 13:05

Kevin Renskers · Accepted Answer · 2020-02-09T13:27:26.190

So basically, this is your view (tip, always try to post a minimum version that people can just copy and paste into Xcode):

struct ContentView: View {
  var body: some View {
    TabView {
      NavigationView {
        VStack(alignment: .leading, spacing: 20) {
          List {
            Image("bg")
              .resizable()
              .aspectRatio(contentMode: .fit)
              .listRowInsets(EdgeInsets())
          }
          .edgesIgnoringSafeArea(.top)
          .navigationBarHidden(true)
        }
        .navigationBarTitle("Title")
      }
    }
  }
}

And yeah, I see the same: the image is not shown in the top safe area. Once you remove the TabView, it does work as expected.

The fix is to add .edgesIgnoringSafeArea(.top) ALSO to the TabView:

struct ContentView: View {
  var body: some View {
    TabView {
      NavigationView {
        VStack(alignment: .leading, spacing: 20) {
          List {
            Image("bg")
              .resizable()
              .aspectRatio(contentMode: .fit)
              .listRowInsets(EdgeInsets())
          }
          .edgesIgnoringSafeArea(.top)
          .navigationBarHidden(true)
        }
        .navigationBarTitle("Title")
      }
    }
    .edgesIgnoringSafeArea(.top)
  }
}

This is exactly what I was looking for. Thanks! Will take the tip on board — rapidcat2711, Feb 09 '20 at 15:00

In my NavigationView '.edgesIgnoringSafeArea' does not move content past the safe area

1 Answers1

Linked