View shifts downward upon navigation link in Swift

Question

I am having a weird issue when I try to navigate back and forth between different views. On WelcomePage, when the user clicks sign in, they are directed to HomePage. HomePage has a navigation bar. Right now, all of the items on the nav bar redirect to HomePage. However, every time you navigate between the two pages using the navigation bar and the sign in button, the entire view is pushed downwards. Also, the navigation bar doesn't display in the preview. Below is the relevant code from the WelcomePage '''

  struct WelcomePage: View {
    var body: some View {
    NavigationView{
            NavigationLink(destination:HomePageView()){
            Text("Sign in")
                .font(.custom(buttons_font, size: 17))
                .foregroundColor(.white)
                .padding()
                .background(
                    RoundedRectangle(cornerRadius: 15)
                        .fill(Color(red: 0.14, green: 1, blue: 0.73))
                        .frame(width: 208, height: 27)
                        .overlay(RoundedRectangle(cornerRadius: 15)
                         .stroke(Color.white, lineWidth: 1))
            )
            }
}}}

''' And Here is the code from the Home Page

'''

struct HomePageView: View {
    var body: some View {
        
    
        ZStack{
            (Color(#colorLiteral(red: 1, green: 0, blue: 0, alpha: 1)))

                .ignoresSafeArea(.all)
                .navigationBarItems(
                    leading:
                        Text("TITLE")
                        .font(
                            .custom(custom_font, size: 50))
                            .underline()
                            .foregroundColor(Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)))
                    ,
                        trailing:
                        HStack( spacing:0.00001) {
                        Spacer()
                        NavigationLink(destination:WelcomePage()){
                            Image("icon1")
                                 }
                        NavigationLink(destination:WelcomePage()){
                            Image("icon2")
                                  }
                        NavigationLink(destination:WelcomePage()){
                            Image("icon3")
                                }
                                }
                )
        }
}

}
'''

score 0 · Answer 1 · answered Aug 19 '22 at 17:30

When I build and run this in my simulator.

On your issue about everything being pushed down to the bottom of the view, if you are using a ZStack I see that you've put a background color, then anything after that, wrap inside of a VStack or HStack. This way, I put in some Text, that text got pushed up inside of the HomePageView

HomePageView:

struct HomePageView: View {
    var body: some View {
        ZStack{
            (Color(#colorLiteral(red: 1, green: 0, blue: 0, alpha: 1)))
                .ignoresSafeArea(.all)
            VStack {
                Text("Hello Chap")
                Button {
                    print("hello chap")
                } label: {
                    Text("Hello Chap")
                }
                Spacer()
            }
        }
        .navigationBarItems(leading: Text("Title"), trailing: HStack(spacing: 0.00001) {
            Spacer()
            NavigationLink(destination:WelcomePage()){
                Image("icon1")
                
            }
            NavigationLink(destination:WelcomePage()){
                Image("icon2")
                
            }
            NavigationLink(destination:WelcomePage()){
                Image("icon3")
                
            }
        })
    }
}

WelcomePage:

struct WelcomePage: View {
    var body: some View {
        NavigationView{
            NavigationLink(destination:HomePageView()){
                Text("Sign in")
                //.font(.custom(buttons_font, size: 17))
                    .foregroundColor(.white)
                    .padding()
                    .background(
                        RoundedRectangle(cornerRadius: 15)
                            .fill(Color(red: 0.14, green: 1, blue: 0.73))
                            .frame(width: 208, height: 27)
                            .overlay(RoundedRectangle(cornerRadius: 15)
                                .stroke(Color.white, lineWidth: 1))
                    )
            }
        }}}

View shifts downward upon navigation link in Swift

1 Answers1