具有多个按钮的视图分别用于转发视图

Question

我有几个垂直堆叠的两对矩形（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？我是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，我都会转换到AliceView。

Answer 1

您可以使用单个Bool和isActice来实现此目的。还需要在NavigationLink之外添加目标参数。并在按钮动作中设置目的地。这是一个示例：

body

Answer 2

这是一个解决方案（通过注释中引用的方法）。使用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))
}