我有几个垂直堆叠的两对矩形(Rectangle()
),每一个都有一个 Button
. 当用户点击按钮时,需要将用户转发到特定的 View
. 例如,如果他们点了Alice,用户需要被转发到AliceView。
如果只是一个按钮的问题,将用户从当前的 View
到另一个不是问题。 总之,以下是我的情况。
import SwiftUI
struct ContentView: View {
@State var canAlice: Bool = false
@State var canKim: Bool = false
var body: some View {
NavigationView {
List {
HStack(spacing: 0) {
// ZStack: A view that overlays its children, aligning them in both axes.
ZStack {
Rectangle().frame(width: UIScreen.screenWidth / 2.0, height: UIScreen.screenWidth / 2.0, alignment: .topLeading)
.foregroundColor(.orange)
.border(Color.yellow, width: 2)
Button(action: {
self.canAlice = true
}, label: {
Text("Alice")
.font(.largeTitle)
.background(Color.black)
.foregroundColor(.white)
})
NavigationLink(destination: AliceView(), isActive: $canAlice) { EmptyView() }
}
ZStack {
Rectangle().frame(width: UIScreen.screenWidth / 2.0, height: UIScreen.screenWidth / 2.0, alignment: .topLeading)
.foregroundColor(.orange)
.border(Color.yellow, width: 2)
Button(action: {
self.canKim = true
}, label: {
Text("Kim")
.font(.largeTitle)
.background(Color.black)
.foregroundColor(.white)
})
NavigationLink(destination: KimView(), isActive: $canKim) { EmptyView() }
}
}.listRowInsets(EdgeInsets())
HStack(spacing: 0) {
...
...
...
}.listRowInsets(EdgeInsets())
HStack(spacing: 0) {
...
...
...
}.listRowInsets(EdgeInsets())
HStack(spacing: 0) {
...
...
...
}.listRowInsets(EdgeInsets())
}
.edgesIgnoringSafeArea(.all)
.statusBar(hidden: true)
}
}
}
现在,如果我点击Alice按钮,当前的 View
过渡到AliceView,回到当前的 View
然后过渡到KimView。 如何在一个 View
并将用户转发到各自的 View
s? 我是SwiftUI的新手。 谢谢。
更新
import SwiftUI
struct ContentView: View {
@State private var selection: Int? = 0
var body: some View {
NavigationView {
List {
HStack(spacing: 0) {
// ZStack: A view that overlays its children, aligning them in both axes.
ZStack {
Rectangle().frame(width: UIScreen.screenWidth / 2.0, height: UIScreen.screenWidth / 2.0, alignment: .topLeading)
.foregroundColor(.orange)
.border(Color.yellow, width: 2)
Button(action: {
self.selection = 1
}, label: {
Text("Alice")
.font(.largeTitle)
.background(Color.black)
.foregroundColor(.white)
})
NavigationLink(destination: AliceView(), tag: 1, selection: self.$selection) { EmptyView() }
}
ZStack {
Rectangle().frame(width: UIScreen.screenWidth / 2.0, height: UIScreen.screenWidth / 2.0, alignment: .topLeading)
.foregroundColor(.orange)
.border(Color.yellow, width: 2)
Button(action: {
self.selection = 2
}, label: {
Text("Kim")
.font(.largeTitle)
.background(Color.black)
.foregroundColor(.white)
})
NavigationLink(destination: KimView(), tag: 2, selection: self.$selection) { EmptyView() }
}
}.listRowInsets(EdgeInsets())
HStack(spacing: 0) {
...
...
...
}.listRowInsets(EdgeInsets())
HStack(spacing: 0) {
...
...
...
}.listRowInsets(EdgeInsets())
HStack(spacing: 0) {
...
...
...
}.listRowInsets(EdgeInsets())
}
.edgesIgnoringSafeArea(.all)
.statusBar(hidden: true)
}
}
}
现在,当我点击Alice或Kim时,我不会过渡到另一个视图,然后弹回初始视图。 无论我点击Alice还是Kim,我都会过渡到AliceView。
这里有一个解决方案(通过评论中提到的方法)。用Xcode 11.4 iOS 13.4测试。
隐藏链接的按钮样式。
struct LinkButtonStyle<D: View>: ButtonStyle {
let destination: D
@Binding var isActive: Bool
func makeBody(configuration: Configuration) -> some View {
configuration.label
.background(NavigationLink(destination: self.destination, isActive: $isActive) { EmptyView() })
}
}
和一个修改单元格的例子
ZStack {
Rectangle().frame(width: UIScreen.screenWidth / 2.0, height: UIScreen.screenWidth / 2.0, alignment: .topLeading)
.foregroundColor(.orange)
.border(Color.yellow, width: 2)
Button(action: {
self.canAlice = true
}, label: {
Text("Alice")
.font(.largeTitle)
.background(Color.black)
.foregroundColor(.white)
}).buttonStyle(LinkButtonStyle(destination: AliceView(), isActive: $canAlice))
}
您可以使用单个 Bool
对于 isActice
参数和单个 NavigationLink
. 还需要在 body
. 并在按钮动作中设置目的地。下面是一个例子。
struct ContentView: View {
@State var showNextView = false
var destination = GeorgeView()
var body: some View {
NavigationView {
List {
HStack(spacing: 0) {
NavigationLink(destination: destination, isActive: $showNextView) { EmptyView() }
// Rest of your implementation...
Button(action: {
self.destination = KimView()
self.showNextView = true
}, label: {
Text("Kim")
.font(.largeTitle)
.background(Color.black)
.foregroundColor(.white)
})
}
}
}
}
}