在Swift中，导航链接导致视图向下移动

Question

当我尝试在不同的视图之间来回导航时，遇到了一个奇怪的问题。在欢迎页面上，当用户点击登录时，他们会被重定向到主页。主页有一个导航栏。现在，导航栏上所有的项目都会重定向到主页。然而，每次你使用导航栏和登录按钮在两个页面之间导航时，整个视图都会向下推。此外，在预览中导航栏也不显示。 以下是欢迎页面的相关代码：

'''

  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))
            )
            }
}}}

这里是首页代码：

'''

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")
                                }
                                }
                )
        }
}

}
'''

- cmw

Answer 1

当我在模拟器中构建和运行时。

关于您提出的所有内容都被推到视图底部的问题，如果您正在使用 ZStack，我看到你已经设置了背景颜色，然后在此之后的任何内容，请将其包装在 VStack 或 HStack 中。这样，我放置了一些文本，该文本被推入了 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")
                
            }
        })
    }
}

欢迎页面：

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))
                    )
            }
        }}}

- SwiftX