[英]How do I add Navigation Buttons to SwiftUI app?
我對 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()
}
}
您可以將 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")
}
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.