如何将导航按钮添加到 SwiftUI 应用程序？

Question

我对 Xcode 中的 Swift 和 SwiftUI 非常陌生，并且一直在开发一个应用程序。

我试图在主屏幕顶部设置三个按钮：主页、关于、帮助。

当点击它们时，它们都应该将用户带到不同的视图（或屏幕）。

我已经创建了应用程序的基础：背景、图像、文本、文本字段和按钮（稍后将设置用于操作）。 我想知道如何将这些按钮添加到我的ZStack （包括一个VStack和一个HStack ）顶部的应用程序顶部作为背景。 到目前为止，这是我的代码：

import SwiftUI

struct ContentView: View {
    
    @State private var accession: String = ""
  
    var body: some View {
     
        ZStack {
            
            // Background navy blue
            Rectangle()
                .foregroundColor(Color(red: 10/255, green: 77/255, blue: 174/255)).edgesIgnoringSafeArea(.all)
        


            // Background light blue
            Rectangle()
                .foregroundColor(Color(red: 86/255, green: 118/255, blue: 255/255))
                .frame(height: 200)
                .offset(x: 0, y: -200)
            
            VStack {
                
                
                // Image of Logo
                Logo()
                    .offset(x: 0, y: -98)
                
                // Text for user input
                Text("Please enter the gene accession number below")
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(Color.white)
                    .offset(x: -9, y: -10)
                
                // Text field for user input Ω£
                TextField("NG_017013", text: $accession)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .offset(x: 0, y: -8)
                
                // Button
                Button(action: {
                    // ParseXML()
                }) {
                    Text("Find my gene! 🧬")
                        .font(.system(size: 23))
                        .foregroundColor(Color.white)
                        .bold()
                        .padding(.all, 10)
                        .background(Color(red: 86/255, green: 118/255, blue: 255/255))
                        .cornerRadius(20)
                        .offset(x: 0, y: 20)
                
                }.padding()
            }.padding()
            
            
            
        }
    }
}

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

Answer 1

您可以将 ZStack 包装在 NavigationView 中。
在 NavigationView 底部添加...

 .navigationBarItems(  
     leading:  
         HStack {  
             NavigationLink(destination: Text("Home View")) {  
                 Text("Home")  
             }  
             NavigationLink(destination: Text("About View")) {  
                 Text("About")  
             }  
         },  
     trailing:  
         NavigationLink(destination: Text("Help View")) {  
             Text("Help")  
         }  
 )