使用多个按钮查看各自的转发视图
Posted
技术标签:
【中文标题】使用多个按钮查看各自的转发视图【英文标题】：View With Multiple Buttons To Go Respective Forwarding Views 【发布时间】：2020-06-13 01:10:57 【问题描述】：我有几个垂直堆叠的两对矩形 (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 中有多个按钮并将用户转发到相应的Views？我是 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。
【问题讨论】：
SwiftUI MVVM Coordinator/Router/NavigationLink提供了类似场景的解决方案 @Asperi 我已根据您的回答进行了一些更改。现在，无论我点击 Alice 还是 Kim，我最终都会切换到 KimView。 【参考方案1】：这是一个解决方案（通过评论中引用的方法）。使用 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))
【讨论】：
是的。有用。非常感谢。只有一个问题...如果我不想隐藏链接怎么办？【参考方案2】：您可以对isActice 参数使用单个Bool 和单个NavigationLink 来实现此目的。还需要在body之外添加一个destination参数。并在按钮动作中设置目的地。这是一个例子：
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)
)
【讨论】：
谢谢。我在 self.destination = KimView() 行遇到多个错误。 1. 无法分配给属性：'self' 是不可变的 2. 无法将类型'KimView' 的值分配给类型'GeorgeView'以上是关于使用多个按钮查看各自的转发视图的主要内容，如果未能解决你的问题，请参考以下文章
QT之QSignalMapper（可以理解为转发器，多个按钮绑定到一个Edit上，且能分辨。每个单独连接的话，反而麻烦）