按钮,如何在嵌入导航栏的swiftUI中打开一个新视图
Button, how to open a new View in swiftUI embedded in navigation bar
我在 NavigationBar
上嵌入了一个按钮。
我尝试制作按钮来打开一个名为 DetailView
的新 View
我尝试使用 NavigationLink
但它在按钮内不起作用。
import SwiftUI
struct ContentView: View {
@ObservedObject var dm: DataManager
@State var isAddPresented = false
var body: some View {
NavigationView {
HStack {
List () {
ForEach (dm.storage) { data in
StileCella(dm2: data)
}
}
.navigationBarTitle("Lista Rubrica")
.navigationBarItems(trailing: Button(action: {
self.isAddPresented = true
// Load here the DetailView??? How??
DetailView()
}) {
Text("Button")
})
}
}
}
}
struct DetailView: View {
var body: some View {
VStack(alignment: .center) {
Text("CIAO").bold()
Spacer()
Image(systemName: "star")
.resizable()
}
}
}
你只需要在你的视图中添加一个sheet修饰符,它根据isAddPresented的值呈现你的视图,就像这样:
struct ContentView: View {
@State var isAddPresented = false
var body: some View {
NavigationView {
List(dm.storage){ data in
StileCella(dm2: data)
}
.navigationBarTitle("Lista Rubrica")
.navigationBarItems(trailing: Button("Button") {
self.isAddPresented = true
})
} .sheet(isPresented: $isAddPresented,
onDismiss: { self.isAddPresented = false }) {
DetailView()
}
}
}
重要的是要记住在关闭时将 isAddPresented 设置回 false 以防止它再次呈现。
除了sheet之外,如果你想像我们以前通过storyboard打开一样打开一个新视图,你可以通过以下方式更新代码:
import SwiftUI
struct ContentView: View {
@ObservedObject var dm: DataManager
@State var isAddPresented = false
var body: some View {
NavigationView {
HStack {
List () {
ForEach (dm.storage) { data in
StileCella(dm2: data)
}
}
.navigationBarTitle("Lista Rubrica")
.navigationBarItems(leading:
NavigationLink(destination: DetailView()) {
Text("Button")
})
}
}
}
}
struct DetailView: View {
var body: some View {
VStack(alignment: .center) {
Text("CIAO").bold()
Spacer()
Image(systemName: "star")
.resizable()
}
}
}
而不是按钮,只需在 navigationBarItems 中添加 NavigationLink。这样就可以了!我写了完整的指南,但主要的变化点是,我使用了
.navigationBarItems(leading:
NavigationLink(destination: DetailView()) {
Text("Button")
})
而不是:
.navigationBarItems(trailing: Button(action: {
self.isAddPresented = true
// Load here the DetailView??? How??
DetailView()
}) {
Text("Button")
})
我在 NavigationBar
上嵌入了一个按钮。
我尝试制作按钮来打开一个名为 DetailView
View
我尝试使用 NavigationLink
但它在按钮内不起作用。
import SwiftUI
struct ContentView: View {
@ObservedObject var dm: DataManager
@State var isAddPresented = false
var body: some View {
NavigationView {
HStack {
List () {
ForEach (dm.storage) { data in
StileCella(dm2: data)
}
}
.navigationBarTitle("Lista Rubrica")
.navigationBarItems(trailing: Button(action: {
self.isAddPresented = true
// Load here the DetailView??? How??
DetailView()
}) {
Text("Button")
})
}
}
}
}
struct DetailView: View {
var body: some View {
VStack(alignment: .center) {
Text("CIAO").bold()
Spacer()
Image(systemName: "star")
.resizable()
}
}
}
你只需要在你的视图中添加一个sheet修饰符,它根据isAddPresented的值呈现你的视图,就像这样:
struct ContentView: View {
@State var isAddPresented = false
var body: some View {
NavigationView {
List(dm.storage){ data in
StileCella(dm2: data)
}
.navigationBarTitle("Lista Rubrica")
.navigationBarItems(trailing: Button("Button") {
self.isAddPresented = true
})
} .sheet(isPresented: $isAddPresented,
onDismiss: { self.isAddPresented = false }) {
DetailView()
}
}
}
重要的是要记住在关闭时将 isAddPresented 设置回 false 以防止它再次呈现。
除了sheet之外,如果你想像我们以前通过storyboard打开一样打开一个新视图,你可以通过以下方式更新代码:
import SwiftUI
struct ContentView: View {
@ObservedObject var dm: DataManager
@State var isAddPresented = false
var body: some View {
NavigationView {
HStack {
List () {
ForEach (dm.storage) { data in
StileCella(dm2: data)
}
}
.navigationBarTitle("Lista Rubrica")
.navigationBarItems(leading:
NavigationLink(destination: DetailView()) {
Text("Button")
})
}
}
}
}
struct DetailView: View {
var body: some View {
VStack(alignment: .center) {
Text("CIAO").bold()
Spacer()
Image(systemName: "star")
.resizable()
}
}
}
而不是按钮,只需在 navigationBarItems 中添加 NavigationLink。这样就可以了!我写了完整的指南,但主要的变化点是,我使用了
.navigationBarItems(leading:
NavigationLink(destination: DetailView()) {
Text("Button")
})
而不是:
.navigationBarItems(trailing: Button(action: {
self.isAddPresented = true
// Load here the DetailView??? How??
DetailView()
}) {
Text("Button")
})