NavigationView常用API一览
1年前 • 784次点击 • 来自 移动端
标签: SwiftUI
原文链接:The Complete Guide to NavigationView in SwiftUI
基础使用:
NavigationView {
Text("Hello, World!")
.navigationBarTitle("Navigation", displayMode: .inline)
}
//displayMode可选 .large大标题(默认值) .inline小标题 .automatic继承至上一页面
Presenting跳转:
NavigationView {
NavigationLink(destination: Text("Second View")) {
Text("Hello, World!")
}
.navigationBarTitle("Navigation")
}
页面值传递:
struct ResultView: View {
var choice: String
var body: some View {
Text("You chose \(choice)")
}
}
struct ContentView: View {
var body: some View {
NavigationView {
VStack(spacing: 30) {
Text("You're going to flip a coin – do you want to choose heads or tails?")
NavigationLink(destination: ResultView(choice: "Heads")) {
Text("Choose Heads")
}
NavigationLink(destination: ResultView(choice: "Tails")) {
Text("Choose Tails")
}
}
.navigationBarTitle("Navigation")
}
}
}
使用isActive属性控制NavigationLink跳转:
struct ContentView: View {
@State private var isShowingDetailView = false
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: Text("Second View"), isActive: $isShowingDetailView) { EmptyView() }
Button("Tap to show detail") {
self.isShowingDetailView = true
}
}
.navigationBarTitle("Navigation")
}
}
}
使用tag与selection属性控制NavigationLink跳转:
struct ContentView: View {
@State private var selection: String? = nil
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: Text("Second View"), tag: "Second", selection: $selection) { EmptyView() }
NavigationLink(destination: Text("Third View"), tag: "Third", selection: $selection) { EmptyView() }
Button("Tap to show second") {
self.selection = "Second"
}
Button("Tap to show third") {
self.selection = "Third"
}
}
.navigationBarTitle("Navigation")
}
}
}
3秒后自动跳转:
struct ContentView: View {
@State private var isShowingDetailView = false
var body: some View {
NavigationView {
NavigationLink(destination: Text("Second View"), isActive: $isShowingDetailView) {
Text("Show Detail")
}
.navigationBarTitle("Navigation")
}
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
self.isShowingDetailView = true
}
}
}
}
添加navigationBarItems:
struct ContentView: View {
@State private var score = 0
var body: some View {
NavigationView {
Text("Score: \(score)")
.navigationBarTitle("Navigation")
.navigationBarItems(
leading:
Button("Subtract 1") {
self.score -= 1
},
trailing:
Button("Add 1") {
self.score += 1
}
)
}
}
}
trailing添加2个按钮:
Text("Score: \(score)")
.navigationBarTitle("Navigation")
.navigationBarItems(
trailing:
HStack {
Button("Subtract 1") {
self.score -= 1
}
Button("Add 1") {
self.score += 1
}
}
)
设置全屏:
struct ContentView: View {
@State private var fullScreen = false
var body: some View {
NavigationView {
Button("Toggle Full Screen") {
self.fullScreen.toggle()
}
.navigationBarTitle("Full Screen")
.navigationBarHidden(fullScreen)
}
.statusBar(hidden: fullScreen)
}
}