I have the following in problem. If I try to give a view a color (Color.red for example) I get the following output:

I can just add .edgesignoressafearea(.top) and the top also gets red. But when I want to add an clickable item, the user won't be able to click it since there still is this invisible bar on the top of the screen. Does Anyone know what my problem is? The problem is in all the tabable views(Timeline, Favorits, Discover, Account). So It must be in either the first code or in tabview (second code) that I send in this post.

When the user clicks on the app first they get this view sending the user to the signin view or the app itself:

var body: some View {
    NavigationView {
        VStack {
            NavigationLink(destination: tabView().navigationBarHidden(true), isActive: $tabview, label: { EmptyView() })
            NavigationLink(destination: loginView().navigationBarHidden(true), isActive: $login, label: { EmptyView() })
                
            if tabview == false && login == false {
                Text("loading")
                    .onAppear(perform: checklogin)
            }
        }
        .navigationBarBackButtonHidden(true)
        .navigationBarHidden(true)
    }
}

Then the apps sends them to tabview:

 var body: some View {
    TabView(selection: $selection) {
        Timeline()
            .tabItem {
                Label("timeline", systemImage: "house")
            }
            .tag(0)
        
        Favorits()
            .tabItem {
                Label("favorits", systemImage: "heart")
            }
            .tag(1)
        
        Discover()
            .tabItem {
                Label("discover", systemImage: "network")
            }
            .tag(2)
        
        Account()
            .tabItem {
                Label("account", systemImage: "person")
            }
            .tag(3)
    }
    .navigationBarBackButtonHidden(true)
    .navigationBarHidden(true)
 }

The problem happens on all of this views. This is the view where I made the screenshot of:

var body: some View {
    ZStack {
        Color.red
        Text("Hello fav!")
    }
    .navigationBarBackButtonHidden(true)
    .navigationBarHidden(true)
}

CodePudding user response：

You need to set the navigation Title to "" because your View is embedded in NavigationView

Create a ViewModifier like this and apply it to your VStack

struct HiddenNavBarModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
        .navigationBarTitle("", displayMode: .inline)
        .navigationBarHidden(true)
    }
}

CodePudding user response：

add .edgesIgnoringSafeArea(.top) and remove your navigation bar if you don't want to be able to get back to your login view anytime. That's the full code without the login page (you should add your login page without a navigationView) :

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            TimeLine()
                .tabItem {
                    Label("timeline", systemImage: "house")
                }
            Favorits()
                .tabItem {
                    Label("favorits", systemImage: "heart")
                }
            Discover()
                 .tabItem {
                     Label("discover", systemImage: "network")
              }
            Account()
                 .tabItem {
                     Label("account", systemImage: "person")
              }
        }
        
    }
    
}
    
struct TimeLine: View {
    var body: some View {
        Color.blue
            .edgesIgnoringSafeArea(.top)
    }
}
struct Favorits: View {
    var body: some View {
        ZStack {
            Color.red
                .edgesIgnoringSafeArea(.top)
            Text("Hello fav!")
        }
    }
}

struct Discover: View {
    var body: some View {
        Color.yellow
            .edgesIgnoringSafeArea(.top)
    }
}
struct Account: View {
    var body: some View {
        Color.purple
            .edgesIgnoringSafeArea(.top)
    }
}



struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            
    }
    
}