Ignore SafeArea inside NavigationView-CodePudding

I am creating simple app with swiftui. In my app, I have 2 screens "ContentView" and "Home".

In my Content View,

struct ContentView : View {
    var body: some View {
        NavigationView {
            ZStack {
                
                //Some views
                  NavigationLink(isActive: self.$routeHome, destination: {Home},label: {
                Text("Home")})

                .navigationBarTitle("title")
            }
.navigationBarTitle("Page1")
        }
    }
}

and In Home,

struct Home : View {
    var body: some View {
        ZStack {
        Color.red.edgesIgnoringSafeArea(.all)
       ScrollView{
           //some views
                 }
             }.navigationBarTitle("Home")
        }
   }

the Red color takes entire screen at first. but when I scroll, the NavigationView area is not in red color anymore. In my actual code, I want to show red color for all spaces when I click on button inside scrollview. Please help me to accomplish this in SwiftUI.

CodePudding user response：

NavigationBar is colored by top child scrollView's offset. If you want to always hide navigationBar background, you can use toolbarBackground() like following code.

struct Home : View {
    var body: some View {
        ...
        .navigationBarTitle("Home")
        .toolbarBackground(.hidden, for: .navigationBar) // Added
    }
}

P.S. I tried this codes with iPhone simulator 16.2

CodePudding user response：

To ignore the safe area inside a NavigationView in SwiftUI, you can use the edgesIgnoringSafeArea(_:) modifier and pass it the .top and/or .bottom edges, like this:

NavigationView {
    VStack {
        // your content here
    }
    .edgesIgnoringSafeArea(.top)
    .edgesIgnoringSafeArea(.bottom)
}

This will allow the content of the VStack to extend under the top and bottom safe areas of the NavigationView. Note that this may cause the content to overlap with the system status bar and the navigation bar, so you may need to adjust the layout or add additional padding or spacing as needed.

Alternatively, you can use the .navigationBarHidden(true) modifier to hide the navigation bar entirely and allow the content to extend to the edges of the screen.

NavigationView {
    VStack {
        // your content here
    }
    .navigationBarHidden(true)
}